cookie存储

cookie存储

基本介绍

（1）web存储相关的技术：cookie | sessionStorage | localStorage |应用缓存（2）cookie是一种会话跟踪技术，用于在进行网页访问的时候，存储页面中的某些数据信息。

* cookie的使用注意点 *

    001 使用cookie来进行数据存储的大小有限制，4KB    002 每个网页中存储cookie的个数（最多50）和每个网站中存储cookie的个数都有限制（200）    003 各个不同的浏览器对cookie的数量也不相同        IE6.0：每个域为20个，大小为4095个字节        IE7.0/8.0：每个域为50个 ，大小为4095个字节        Opera：每个域为30个 ，4096个字节        FF：每个域为50个  ，大小为4097个字节        Safari：没有个数限制，大小为4097个字节        Chrome：每个域为53个，大小为4097个字节        总结：在进行页面cookie操作的时候，应该尽量保证cookie个数小于20个，总大小 小于4KB    004 cookie数据的过期时间        1）默认情况下，cookie存储的内容是一次性的，它的有效期间是当前会话（需要把整个浏览器都关闭会话就结束）        2）设置过期时间：通过expires=time;的格式来进行指定, 设置了之后只要没有超过过期时间，那么数据将一直都在    005 cookie是不可以跨浏览器的(在IE中保存的cookie, 不可以在火狐中使用)    006 cookie是不可以跨域的(跨域名)        示例：127.0.0.1/code/test.html 和127.0.0.1/code/test1.html可以访问        网络请求的常见路径：            http://www.baidu.com:80/资源            协议://域名.后缀:端口号/资源        不能跨域的含义：就是只有 （协议+域名+后缀+端口）号都相同才能相互访问            http://www.baidu.com:80/a.html            http://www.baidu.com:80/b.html  能            http://www.baidu.com:81/a.html            http://www.baidu.com:80/b.html 不能（端口号不相同）            http://mp3.baidu.com:80/a.html            http://map.baidu.com:80/b.html 不能（二级域名不相同）            https://www.baidu.com:80/a.html            http://www.baidu.com:80/b.html 不能（协议不相同）            http://www.bdu.com:80/a.html            http://www.dbu.com:80/b.html 不能（以及域名不相同）

* cookie的设置和使用 *

 1）设置方法：    设置cookie数据：document.cookie = "name=zhangsan";    设置cookie数据和过期的时间：document.cookie = "name=zhangsan; expires="+date+";";    过期7天的设置：var date = new Date(); // date.setDate(date.getDate() + 7);2）使用注意：    在设置cookie的时候，一次只能设置一个数据（一个键值对），不能进行批量设置    错误的演示：window.cookie = "name=zhangsan&age=18";

示例代码

    //设置三个cookie的值，默认的过期时间是seesion（会话内）    document.cookie = "name=wendingding";    document.cookie = "age=18";    document.cookie = "des=12345";    //设置cookie的值，并指定过期的时间    var date = new Date();    date.setDate(date.getDate() + 3);   //3天的过期时间    //注意：在设置过期时间的时候，中间使用；分隔开发    document.cookie = "color=red;expires="+date;    //删除cookie    //删除cookie的原理：只要过期时间超过了当前的时间, 数据就会被删除    date.setDate(date.getDate() + -1);    document.cookie = "age=18; expires="+date+";";

cookie相关方法的封装

（1）读取某个cookie的值（需要做切割处理）（2）添加cookie数据（需要判断是否要设置过期时间）（3）删除cookie数据（利用过期时间和添加cookie的方法实现）

01 获取某个key对应的cookie值

    document.cookie = "name=zhangsan";    document.cookie = "age=18";    console.log(document.cookie);    //01 获取某个key对应的cookie值    function getCookie(key) {        //01 先对获取的字符串进行切割，获取得到数组        var arrM = document.cookie.split(";");        console.log(arrM);        //02 遍历数组        for (var i = 0,len = arrM.length;i<len;i++)        {            //03 对数组中取出来的每个元素再进行切割            var arrT = arrM[i].split("=");            var res = arrT[0].replace(" ","");            if(res == key)            {                return arrT[1];            }        }    }    console.log(getCookie("age"));

02 添加cookie和设置过期时间

  //添加单个cookie的值    function addCookie(key,value,date) {        //01 判断是否需要设置过期时间        if (arguments.length == 2)        {            document.cookie = key + "=" + value;        }else if (arguments.length == 3)        {            //02 设置过期时间            var dateM = new Date();            dateM.setDate(dateM.getDate() + date);            var res = key + "=" + value +";" + "expires="+dateM;            document.cookie = res;        }    }    addCookie("haha","wuwuwuw",2);

03 删除cookie数据

    //删除cookie数据：原理（当前的时间超过了cookie的过期时间那么该数据就会被删除）    function removeCookie(key){        //重新设置某个cookie的过期时间        addCookie(key,"",-1);    }    removeCookie("haha");

使用cookie存储技术来记住页码

使用cookie技术来处理微博项目说明（1）之前的微博项目中还存在一些问题，如果当前的页面是第二页，那么此时刷新页面会自动跳转到默认显示的第一页（2）要求在进行刷新的时候，显示的还是当前页的数据    具体实现思路：在代码中获取当前的pageNumber,那么当页面加载完成之后就调用方法传递pageNumber作为参数刷新指定页的数据    具体实现：        1) 在点击页码的时候拿到当前的页码，通过page.text()        2) 在切换页码选中状态之后，添加代码：addCookie("pageNumber",$(this).text());        3) 在按钮点击之前（页面加载完成之后）获取页码，var pageNumber = getCookie("pageNumber") || 1;        4) 在获取默认显示微博列表数据的位置，把获取第一页的数据修改成获取第pageNumber页的数据        5) 处理默认选中的页码：oPage.child涉及到的代码：