cookies,sessionStorage和localStorage的区别_cookies,sessionstorage 和 localstorage 的区别?-CSDN博客

本文链接：https://blog.csdn.net/iamgoodgilr/article/details/70861002

cookies

//设置cookie
function setCookie(name, value, seconds) { 
   seconds = seconds || 0; //seconds有值就直接赋值，没有为0。
    var expires = "";
    if (seconds != 0 ) { //设置cookie生存时间
        var date = new Date();
        date.setTime(date.getTime()+(seconds*1000));
        expires = "; expires="+date.toGMTString();
    }
    //转码并赋值
    document.cookie = name+"="+escape(value)+expires+"; path=/"; 
}

//取得cookie
function getCookie(name) { 
   var nameEQ = name + "=";
   var ca = document.cookie.split(';'); //把cookie分割成组
   for(var i=0;i < ca.length;i++) {
       var c = ca[i]; //取得字符串
       while (c.charAt(0)==' ') { //判断一下字符串有没有前导空格
           c = c.substring(1,c.length); //有的话，从第二位开始取
       }
       if (c.indexOf(nameEQ) == 0) { //如果含有我们要的name
       //解码并截取我们要值
           return unescape(c.substring(nameEQ.length,c.length)); 
       }
   }
   return false;
 }

//清除cookie
function clearCookie(name) {   
    setCookie(name, "", -1);
}

localStorage

var storage=window.localStorage;
//设置localStorage
storage.setItem("docInfo","你好");
//获取localStorage
storage.getItem("docInfo");
//删除指定localStorage
storage.removeItem("docInfo");
//删除所有localStorage
storage.clear();

sessionStorage

var storage=window.sessionStorage;
//设置sessionStorage
storage.setItem("docInfo","你好");
//获取sessionStorage
storage.getItem("docInfo");
//删除指定sessionStorage
storage.removeItem("docInfo");
//删除所有sessionStorage
storage.clear();

测试：

//打开浏览器弹出“你好aaaaa”
localStorage.setItem("docInfo","你好aaaaa");
alert(localStorage.getItem("docInfo"));//你好aaaaa

//注释第一行代码之后,再打开浏览器弹出“你好aaaaa”
//localStorage.setItem("docInfo","你好aaaaa");
alert(localStorage.getItem("docInfo"));//你好aaaaa

//打开浏览器弹出“你好aaaaa”
sessionStorage.setItem("docInfo","你好aaaaa");
alert(localStorage.getItem("docInfo"));//你好aaaaa

//注释第一行代码之后，再打开浏览器弹出“null”
//sessionStorage.setItem("docInfo","你好aaaaa");
alert(localStorage.getItem("docInfo"));//null

总结：
localStorage：永久保存，除非手动删除数据。数据完全存储在客户端。
sessionStorage：关闭浏览器之后自动删除数据。数据完全存储在客户端。
Cookie：在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭，如果不设置过期时间，会存在内存里，浏览器关闭即失效。数据在浏览器和服务器间来回传递。（判断用户是否登录——针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。）

特性	Cookie	localStorage	sessionStorage
数据的生命期	可设置失效时间，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	一般为5MB	一般为5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持