cookie&llocalstorage&sessionStorage

cookie存储

基本介绍:

  1. web存储相关的技术:cookie | sessionStorage | localStorage |应用缓存

  2. cookie是一种会话跟踪技术,用于在进行网页访问的时候,存储页面中的某些数据信息。
    cookie的使用注意点:

    1. 使用cookie来进行数据存储的大小有限制,4KB;
    2. 每个网页中存储cookie的个数(最多50)和每个网站中存储cookie的个数都有限制(200);
    3. 各个不同的浏览器对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

    1. cookie数据的过期时间

      1. 默认情况下,cookie存储的内容是一次性的,它的有效期间是当前会话(需要把整个浏览器都关闭会话就结束)
      2. 设置过期时间:通过expires=time;的格式来进行指定, 设置了之后只要没有超过过期时间,那么数据将一直都在
    2. cookie是不可以跨浏览器的(在IE中保存的cookie, 不可以在火狐中使用)

    3. 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的值(需要做切割处理)
    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
  1. 添加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);
  1. 删除cookie数据(利用过期时间和添加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

sessionStorage存储

简单说明

1. 在存储用户数据的时候,因为cookie可以存储的数据比较小才4KB左右,所以也可以考虑使用sessionStorage来存储,大小限制为2M左右
2. 该技术和localStorage是h5推出的,因此在使用的时候,需要考虑到兼容性的问题
3. 相关资料:http://www.w3school.com.cn/html5/html_5_webstorage.asp
4. 简单介绍和使用:
    001 sessionStorage:会话存储技术(session-会话)
    002 该技术和cookie一样,一样浏览器退出了,那么保存的数据就会
    003 演示sessionStorage技术的相关操作
        添加|获取|更新|删除|清空

示例代码








localStorage存储

简单说明

1. 简单对比:保存在本地 + 没有时间限制
2. 大小比较:4K - 5M - 20M
3. 使用方式和sessionStorage相同

示例代码








你可能感兴趣的:(cookie&llocalstorage&sessionStorage)