localStorage、sessionStorage和cookie

---

localStorage、sessionStorage和cookie

浏览器保存数据有三种方式：localStorage、sessionStorage、cookie，与服务器端的session相区别，它们有相同点，也有不同点。本篇博客对三种方式的作用及用法进行总结。

目录

• localStorage
• sessionStorage
• cookie

localStorage

localStrorage是本地储存，也是永久储存,没有方法可以设置它的存在时效，只能手动删除数据，它改变了以前只能用cookie的局限性，扩大了数据存储量。在一般浏览器中支持的是5M大小，不同的浏览器会有所不同。

//存储数据
//三种写法：key = "value"
localStorage["key"] = "value";//第一种
localStorage.key = "value";//第二种
localStorage.setItem("key","value");//第三种(推荐)
//获取数据：三种方式同上
localStorage.["key"];
localStorage.key;
localStorage.getItem("key");//获取名为key的值
//删除单个指定数据
localStorage.removeItem("key");
//删除全部数据
localStorage.clear();
//遍历localStorage的数据
var storage = window.localStorage;//获取localStorage对象
var len = storage.length;
if(len == 0) return "没有缓存数据";
for(var i = 0;i < len;i ++){
    console.log(storage.key(i));//打印名称，key()方法必须要传一个参数。
    console.log(storage.getItem(storage.key(i)));//打印该名称对应的值
}

localStorage的局限：

1. 浏览器兼容性问题：IE浏览器只有IE8以上的版本才支持localStorage;
2. localStorage本质上是对字符串的读取(只支持string类型的存储，即使存储进去的是number类型，打印出来的也是string类型)，如果存储内容过多的话会消耗内存空间，会导致页面变卡。
3. localStorage不能被爬虫抓取到。

• IE浏览器下的存储UserData

刚刚提到在IE浏览器下只有IE8以上的版本才支持localStorage，而IE8以下的版本可以通过IE专门的存储方式UserData；UserData存储通过将数据写入一个UserData存储区以XML格式来保存数据，作用类似与localStorage，即使IE浏览器关闭或刷新，下次开启数据依然存在。UserData行为提供了一个比Cookie更具有动态性和更大容量的数据结构。每页的UserData存储区数据大小可以达到64Kb，每个域名可以达到640Kb。UserData行为通过sessions为每个对象分配UserData存储区。使用save和load方法将UserData存储区数据保存在缓存（cache）中。如果需要兼容所有版本浏览器，可以使用UserData。

• localStorage遵循同源策略，所谓同源政策指的是协议相同，域名相同，端口相同。所以在不同的网站是不能共用相同的localStorage。sessionStorage和cookie也是。
  
  

如何给localStorage设置一个过期时间

// 在设置存储属性时就将过期时间一并存储，在每次取出时将过期时间与当前时间比较。
get(key) {
    /*
    * get 获取方法
    * @ param {String}     key 键
    * @ param {String}     expired 存储时为非必须字段，所以有可能取不到，默认为 Date.now+1
    * @ 由@IT·平头哥联盟-首席填坑官∙苏南 分享,交流：912594095
    */
    const source = this.source,
    expired = source[`${key}__expires__`]||Date.now+1;
    const now = Date.now();

    if ( now >= expired ) {
        this.remove(key);
        return;
    }
    const value = source[key] ? JSON.parse(source[key]) : source[key];
    return value;
}

sessionStorage

sessionStorage是临时存储，当页面关闭时，保存在sessionStorage里面的值就会销毁。

//存储数据
sessionStorage["key"] = "value";
sessionStorage.key = "value";
sessionStorage.setItem("key");
//获取数据
sessionStorage["key"] = "value";
sessionStorage.key = "value";
sessionStorage.getItem("key") = "value";

sessionStorage的特点

1. 单标签页限制，sessionStorage操作限制在单个标签页中，在此标签页进行同源也访问都可以进行共享sessionStorage数据。因此sessionStorage非常适合单页应用程序，可以方便在业务模块进行传值。
2. 临时储存，在页面关闭后sessionStorage里的数据就会消失，若使用Chrome的恢复标签页功能，sessionStorage的数据也会回复。
3. 不同的浏览器存储的上限不一样，但大多数浏览器把上限限制在5M以下。
   
   

cookie

cookie分为会话cookie和持久cookie两种：

• 会话cookie是存在于用户浏览该网站的临时存储器中，当用户关闭浏览器时，浏览器通常会删除会话cookie。
• 持久cookie是指在cookie里可以设置到期时间，当时间到时，cookie的数据才会消失，因此可以使用cookie来记录用户长时间浏览网页的习惯，记住密码等。

cookie使用HTTP标头设置，并通过来自web服务器的HTTP响应发送，头文件指示web浏览器存储cookie，并在以后的请求中将其发送回服务器。浏览器会被指示设置两个cookie，第一个为会话cookie，第二个是持久cookie。

//设置cookie
function setCookie(key, value, iDay) {//iDay设置过期时间
        var oDate = new Date();
        oDate.setDate(oDate.getDate() + iDay);
        document.cookie = key + '=' + value + ';expires=' + oDate;
        console.log(document.cookie);
    }
//删除cookie
function removeCookie(key) {
    setCookie(key, '', -1);
}
//获得cookie
function getCookie(key) {
    console.log('all' + document.cookie);
    var cookieArr = document.cookie.split(';');
    for (var i = 0; i < cookieArr.length; i++) {
        var arr = cookieArr[i].split('=');
        if (arr[0] === key) {
            return arr[1];
        }
    }
    return false;
}

注意：在本地调试cookie代码时，chrome浏览器不支持js在本地操作，而其他主流浏览器都支持，部署在服务器上时，所有浏览器都支持。

cookie的属性

1. expires：绝对失效时间，时间格式只支持GTM标准时间，所有浏览器都支持。使用方法如上。
2. max-age: 相对失效时间，格式是数字，单位为秒。使用方法如下：

function setCookie(key, value, time) {
        document.cookie = key + '=' + value + ';max-age=' + time;
        console.log(document.cookie);
    }

虽说expires现在已经被max-age属性所取代，但是截至2016年，IE不支持max-age。因此在浏览器兼容上，使用expires较好。若expires和max-age同时出现，以max-age为准。
3. path：指定与cookie关联在一起的网页。
4. domain：指定共享该cookie的域。

path和domain属性定义了cookie的范围，指定了该cookie属于哪个网站，cookie只能在当前资源的顶级域及其子域上设置，这一点也指明了cookie遵循同源政策。如果服务器未指定cookie的domain和path属性，则默认为请求的资源的域和路径。没有域名的cookie和有域名设置的cookie之间存在差异，前者仅将请求发送到顶级域，后者是所有子域都包含在内。但是对于IE来说，它始终将cookie发送到子域，而不管cookie是否设置了域名。

• 在删除cookie时，需注意域和路径，应与你想要删除的cookie的域和路径相同才能删除。

上面提到了cookie遵循同源政策，两个网页的一级域名相同，二级域名不相同，可以设置document.domain共享Cookie。

//在两个页面都设置以下代码
document.domain = "一级域名";

设置了document.domain后，在分别在两个页面设置的cookie就能被另一个页面获取到。这种方法只适用于cookie和iframe窗口。
5. secure：布尔值，指传输类型（安全传输false/不安全传输true），默认为不安全传输。该属性旨在使cookie通信限于加密传输，指导浏览器仅通过安全加密连接使用cookie。即使设置了secure为false，cookie也是不安全的。
6. HttpOnly属性指示浏览器不要通过HTTP和HTTPS请求以外的渠道公开cookie，这意味着cookie不能通过客户端脚本语言（特别是JavaScript）来访问，这个值在document.cookie中也不可见。

cookie的限制条件：cookie有数量限制，在IE7中每个域名下增加cookie的限制数量到50个，Opera限定cookie数量为30个，Safari和Chrome对每个域名下的cookie个数没有限制。发送服务器的所有cookie的最大数量仍旧维持原始规范中所指出的4KB，所有超出该限制的cookie都会被截掉并且不会发送至服务器。

cookie存储的位置：

1. 设置过期时间失效(只要设置了过期时间cookie就会存储在硬盘里面)
2. 当会话结束时失效，即关闭浏览器窗口(如果没有设置Expires，cookie就会存储在内存里面)