一、localStorage和sessionStorage

  • 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。
    优势:
  • 1、localStorage拓展了cookie的4K限制
  • 2、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的
    局限:
  • 1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性
  • 2、目前所有的浏览器中都会把localStorage的值类型限定为string类型
  • 3、localStorage在浏览器的隐私模式下面是不可读取的
  • 4、localStorage不能被爬虫抓取到
  • 5、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡,目前可以忽略。
    localStorage和sessionStorage的区别
  • localStorage是永久的储存在浏览器里,只要你不手动清除它就会一直存在
  • sessionStorage是暂时储存,只要把浏览器关闭就会自动清除,注意,是关闭所有同种浏览器才能清除
  • localStorage和sessionStorage的用法一致。
    localStorage的使用
  • 浏览器支持情况:
  • 判断浏览器是否支持:

    1
    2
    3
    4
    5
    6
    7
    if(window.localStorage){
    console.log('浏览器支持localstroage')
    }
    else{
    alert('你的浏览器不支持localstroage!')
    // IE低版本不支持用UserData(不说明)
    }
  • 1、设置

  • window.localStorage.setItem('key', 'value'); // 键、值 值可以是一个变量

  • 2、获取

  • window.localStorage.getItem('key');

  • 3、清除

  • localStorage.removeItem('key'); //清除一条
  • window.localStorage.clear(); //清除全部
提示:
  • webStorage的使用也是遵循同源策略的,所以不同的网站直接是不能共用相同的webStorage
  • webStorage常用来储存一些数据,如登录信息
  • webStorage转换成为字符串形式,一般我们会将可以使用JSON.stringify()这个方法将JSON存入localStorage中,读取时就是JSON字符串
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var data={
    name:'小明',
    sex:'男',
    hobby:'编程'
    };
    var info=JSON.stringify(data)
    if(window.localStorage){
    window.localStorage.setItem('info',info)
    console.log(window.localStorage.getItem('info'))
    }
    else{
    alert('你的浏览器不支持localstroage!')
    }

二、cookie

  • 注意:javascript在chrome浏览器中不支持本地调试cookie,用firefox亲测可以,如果一定要在chrome中调试,要将代码放到服务器才可以调试。
    创建
  • document.cookie="username=张三";
  • 可以为 cookie 添加一个过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除:
  • document.cookie="username=李四; expires=Thu, 18 Dec 2043 12:00:00 GMT"; // 可以用Date()函数来设置,详细看后面
  • 可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下,cookie 属于当前页面。
  • document.cookie="username=王五; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
    读取
  • var c= document.cookie; // 读取该网站的全部cookie,如:cookie1=value; cookie2=value……
  • 返回指定的cookie看后面的示例
修改
  • 修改cookie类似于创建cookie,旧的cookie被新的覆盖
  • document.cookie="username=张三";
删除
  • 只需要设置 expires 参数为以前的时间即可
  • document.cookie = "username=张三; expires=Thu, 01 Jan 1970 00:00:00 GMT";
示例:
  • 设置cookie

    1
    2
    3
    4
    5
    6
    7
    8
    function setCookie(key,value,exdays)
    {
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = key + "=" + value + "; " + expires;
    }
    setCookie('username','张三',1) //exdays为0或负数时删除该cookie
  • 获取cookie

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function getCookie(cname){
    var name = cname + "=";
    var arr = document.cookie.split(';');
    for(var i=0; i<arr.length; i++) {
    var c = arr[i].trim();
    if (c.indexOf(name)==0) {
    return c.substring(name.length,c.length); // 返回用户指定的cookie
    }
    }
    return "";
    }
  • 检测cookie

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function checkCookie(){
    var user=getCookie("username");
    if (user!=""){
    alert("欢迎 " + user + " 再次访问");
    }
    else {
    user = prompt("请输入你的名字:","");
    if (user!="" && user!=null){
    setCookie("username",user,7);
    }
    }
    }

查看菜鸟教程演示页面

注意事项
  • 1、Chrome中过期时间可能会出错,因为它用的是格林尼治时间,北京时间会多出8小时;
  • 2、服务器的时间和时区设置会影响cookie;
  • 3、每条cookie只有4k大小,储存有限但是几乎都是敏感的信息,如账号密码;
  • 4、当cookie过多超过浏览器预定的数目后,有的浏览器会智能清除一些cookie。