cookies,sessionStorage和localStorage的区别

来源：互联网发布：天堂伞淘宝官方旗舰店编辑：程序博客网时间：2024/05/18 00:42

cookies

//设置cookiefunction 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=/"; }

//取得cookiefunction 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; }

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

localStorage

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

sessionStorage

var storage=window.sessionStorage;//设置sessionStoragestorage.setItem("docInfo","你好");//获取sessionStoragestorage.getItem("docInfo");//删除指定sessionStoragestorage.removeItem("docInfo");//删除所有sessionStoragestorage.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有更好的支持

参考资料：
http://han.guokai.blog.163.com/blog/static/13671827120112694851799/
https://segmentfault.com/a/1190000002723469
http://www.cnblogs.com/GumpYan/p/5708692.html

1 0