经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
WEB前端第六十四课——H5新特性:数据持久化cookie、localStorage、sessionStorage
来源:cnblogs  作者:后来喵  时间:2021/3/1 9:13:53  对本文有异议

1.数据持久化操作对象

  本地存储,是相对于数据库存储而言的,是指将数据存储在个人设备上。

  存储的操作方式有三种:

  ⑴ cookie

  ⑵ localStorage

  ⑶ sessionStorage

2.cookie

  可以通过前台或后台进行设置和获取数据,

  在访问网站时自动向后台发送数据。

  ⑴ 前台设置cookie

    document.cookie="key=value;exspires=有效时间/ms;path=存储路径";

    说明:有效期为GMT格式,使用“toGMTString()”方法将标准时间转换为GMT格式;

       有效时间之后,cookie存储的数据信息会自动清除;

       键值如果有汉字需要使用“escap()”方法转码。

    获取cookie:document.cookie  //结果为字符串格式的cookie值。

  代码示例:

  1. <script>
  2. var timeNow=new Date(); //结果为日期时间格式
  3. var timeStamp=timeNow.getTime()+1000*10; //将日期时间转换为时间戳ms,设置有效期。
  4. var expires=new Date(timeStamp).toGMTString(); //使用toGMTString()方法将时间戳转换为“GMT”时间格式。
  5. var expires2=new Date(new Date().getTime()+1000*10).toUTCString(); //GMT=UTC+0,二者结果相同。
  6. console.log(expires); //结果为GMT格式的时间
  7. console.log(expires2);
  8. // 设置及读取cookie
  9. document.cookie="userName=Rebecca;expires="+expires2;
  10. console.log(document.cookie); //结果为cookie键值字符串
  11. var Arr=document.cookie.split('=');
  12. var cookieObj={};
  13. cookieObj[Arr[0]]=Arr[1];
  14. console.log(cookieObj); //将cookie字符串转换为数组,再转换为对象后,可通过key访问value。
  15. console.log(cookieObj.userName);
  16. </script>

  ⑵ PHP设置cookie

    设置cookie:setcookie('键','值','有效期/s','路径');  //有效期获取使用“time()”

    读取cookie:$_COOKIE; //结果为“cookie键值对”构成的数组

    说明:前后台设置设置cookie时,前三个参数都是必须的!路径则是可选参数。

       设置cookie时,如果键值存在则修改、不存在则增加;

       删除cookie时,设置时间“time()-1”即可完成,前后台同理。

       通常由后台设置cookie,前台进行获取。

  代码示例:

  1. <body>
  2. <button onclick="setCookie()">添加cookie</button>
  3. <script>
  4.  
  5. (function () {
  6. var cookie=document.cookie;
  7. if (cookie.length!=0){
  8. console.log(cookie);
  9. console.log(typeof cookie); //字符串类型
  10. }else {
  11. console.log('no cookie');
  12. }
  13. })();
  14. function setCookie() {
  15. var xhr=new XMLHttpRequest();
  16. xhr.onreadystatechange=function () {
  17. if (xhr.readyState==4){
  18. if (xhr.status==200){
  19. console.log(xhr.responseText);
  20. console.log(typeof xhr.responseText); //字符串类型
  21. console.log(JSON.parse(xhr.responseText));
  22. console.log(typeof JSON.parse(xhr.responseText)); //数组类型
  23. }
  24. }
  25. }
  26. var formData=new FormData();
  27. formData.append('userName','Rebecca');
  28. xhr.open('post','cookie.php',true);
  29. xhr.send(formData);
  30. }
  31. </script>
  32. </body>
  1. <?php
  2. $name=$_POST['userName'];
  3. setcookie('uName',$name,time()+60); //后台设置cookie有效时间,单位为“S”。
  4. echo json_encode($_COOKIE);
  5. ?>

  

 3.localStorage

  本地存储,通过js操作,在个人设备上进行存储和获取数据,

  设置的数据如果不删除会一直存在,存储在浏览器中。

  存储设置:localStorage.setItem('key','value');  //key存在为修改,否则增加。

  存储读取:localStorage.getItem('key');

  存储删除:localStorage.removeItem('key');

4.sessionStorage

  会话存储,通过js操作,在浏览器打开时可以存储和获取数据,当浏览器关闭时数据删除。

  操作方法与localStorage相同。

  存储设置:sessionStorage.setItem('key','value');  //key存在为修改,否则增加。

  存储读取:sessionStorage.getItem('key');

  存储删除:sessionStorage.removeItem('key');

5.存储数据类型

  简单类型数据,直接存储;

  对象类型数据,需将对象转换成字符串进行存储。

  localStorage复杂存储代码示例:

  1. <script>
  2. var obj={
  3. 'name':'Rebecca',
  4. 'sex':'female',
  5. 'age':'21',
  6. 'collage':'Harvard'
  7. }
  8. var str=JSON.stringify(obj); //将对象转换成字符串格式才能存储
  9. localStorage.setItem('person',str); //存储复杂数据
  10. var store=localStorage.getItem('person'); //获取结果为字符串
  11. var storeObj=JSON.parse(store); //将字符串转为对象
  12. console.log(storeObj.name);
  13. </script>

 6.cookie复杂存储

  代码示例:

  1. <script>
  2. //利用Ajax发送复杂数据至后台,PHP后台设置cookie
  3. var xhr=new XMLHttpRequest();
  4. xhr.onreadystatechange=function () {
  5. if (xhr.readyState==4){
  6. if (xhr.status==200){
  7. console.log(JSON.parse(xhr.responseText));
  8. }
  9. }
  10. }
  11. var formData=new FormData();
  12. formData.append('name','Rebecca');
  13. formData.append('sex','female');
  14. formData.append('age','21');
  15. xhr.open('post','cookie.php',true);
  16. xhr.send(formData);
  17.  
  18. //前台获取cookie,并将字符串类型的cookie转换为可用对象数据。
  19. var cookie=document.cookie;
  20. console.log(cookie); //获取结果为字符串;
  21. // 将字符串转换为数组,然后再转换为对象
  22. var cookieArr=cookie.split(';');
  23. console.log(cookieArr); //注意:数组中除第一个键值对,其他的存在空格,在转换为对象时需要去除空格!!
  24. var cookieObj={};
  25. for (var i=0;i<cookieArr.length;i++){
  26. var kv=cookieArr[i].trim().split('=');
  27. cookieObj[kv[0]]=kv[1];
  28. }
  29. console.log(cookieObj);
  30. console.log(cookieObj.personName);
  31. console.log(cookieObj['personAge']);
  32. </script>
  1. <?php
  2. $name=$_POST['name'];
  3. $sex=$_POST['sex'];
  4. $age=$_POST['age'];
  5. setcookie('personName',$name,time()+60*2); //后台设置cookie有效时间,单位为“S”。
  6. setcookie('personSex',$sex,time()+60*2); //后台设置cookie有效时间,单位为“S”。
  7. setcookie('personAge',$age,time()+60*2); //后台设置cookie有效时间,单位为“S”。
  8. // $success=array('msg'=>'ok','info'=>$_COOKIE);
  9. echo json_encode($_COOKIE);
  10. ?>

 

原文链接:http://www.cnblogs.com/husa/p/14386542.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号