cookie、sessionStorage和localStorage的区别

cookie、sessionStorage和localStorage的区别

补充：

• Cookie如果设置了过期时间则保存在硬盘中除非手动删除否者一直存在
• Cookie如果没有设置过期时间保存在浏览器内存中，关闭浏览器就删除
• sessionStorage一直保存在浏览器内存中，关闭页面或浏览器信息就被清除
• localStorage保存在硬盘中，除非手动删除，否则一直存在
• Cookie、sessionStorage和localStorage都遵守同源策略
• Cookie、localStorage不同标签页但是页面同源，也可共享信息
• sessionStorage不同标签页面不可共享信息，相同标签页并且通过js跳转到同源页面即可共享信息
• sessionStorage不在不同的标签页中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的

Cookie 详情

定义：Cookie，有时也用其复数形式 Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息

1、Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:

• 当用户访问 web 页面时，他的名字可以记录在 cookie 中。
• 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

2、当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中（请求头的Set-Cookie）。服务端通过这种方式来获取用户的信息。

3、Cookie 以名/值对形式存储，如下所示:

username=John Doe

4、使用 JavaScript 创建Cookie
可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

5、使用 JavaScript 删除 Cookie
删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

完整实例

function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
    }
    return "";
}
function checkCookie(){
    var user=getCookie("username");
    if (user!=""){
        alert("欢迎 " + user + " 再次访问");
    }
    else {
        user = prompt("请输入你的名字:","");
          if (user!="" && user!=null){
            setCookie("username",user,30);
        }
    }
}

sessionStorage和localStorage详情

1、HTML5 提供了两种在客户端存储数据的新方法：

• localStorage - 没有时间限制的数据存储
• sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

2、保存数据语法：

sessionStorage.setItem("key", "value");
localStorage.setItem("key", "value");

3、读取数据语法：

var name1 = sessionStorage.getItem("key");
var name2 = localStorage.getItem("key");

4、删除指定键的数据语法：

sessionStorage.removeItem("key");
localStorage.removeItem("key");

5、删除所有数据：

sessionStorage.clear();
localStorage.clear();