简谈前端存储

cookie

定义：

    它会在用户访问服务器的时候被带上。但是不要使用过量，因为cookie在每次请求的时候都会被带上。你总不想每次访问自己网站接口或者文件的时候都带上一堆可能用不到的信息把？这样会增大请求包的大小。

限制：

    cookie可以设置访问域。即，如果你设置cookie的时候，设定了cookie的访问域名为一个顶级域名，则可以达到几个子域名共享cookie的效果。

存储时间：

    如果设定了cookie的超时时间的话，那么cookie将在到期的时候失效。如果没有设定，那么cookie就是session级别的。cookie的session含义与sessionStorage的session含义有区别。cookie的session是，在未关闭浏览器的情况下，所有的tab级别的页面或新开，或刷新，均属于一个session，也就是说你在一个页面种下cookie然后在打开一个新的页面，会发现新的页面也有cookie，关闭当前tab或者刷新都会存在，但是退出浏览器之后就不在了，证明cookie的session含义是在浏览器退出时才结束。

使用场景：

    在存储一些需要随tab附带的信息的时候，最常见的就是用户登录名和密码。存储一些同步访问页面的时候必须要被带到服务端的信息。至于在页面上一些其他操作的信息就没必要存到cookie里了，例如购物车的东西之类的。可以存到数据库里，然后通过cookie的ID进行查询和调取。

 

sessionStorage

定义：

    sessionStorage属于webstorage的一种，sessionStorage与localStorage类似，可以存储k-v形式的数据，通过set便可以存储，通过sessionStorage.getItem进行获取，也就是说sessionStorage，是session级别的存储。其存储于客户端。服务端是无法直接拿到的。

访问限制：

    sessionStorage的访问限制更高一些，只有当前设定sessionStorage的域下才能访问，而且不同的两个tab之间不能互通。

存储时间：

    是以tab为单位的，伴随着tab存在，如果tab关闭，那么sessionStorage也会随之失效

使用场景：

    最经典的就是音乐或者视频播放器恢复进度条

 

localStorage

定义：

    localStorage与sessionStorage较为相似，接口也简单，通过localStorage.setItem/localStorage.getItem即可使用。可以存储k-v形式的数据。存储的值需要是字符串类型，没法直接存储对象，但是可以将对象序列化为字符串再存入。localStorage的存储周期比sessionStorage长，如果用户不清理的话，是可以永久存储的。

var yourName = {
    name: 'yourName',
    describe: '阳光、乐观'
};
localStorage.setItem('test', JSON.stringify(yourName));
JSON.parse(localStorage.getItem('test'));

 

访问限制：

    Storage虽然相似，但是访问限制却不尽相同，localStorage的访问域默认设定为设置localStorage的当前域，其他域名不可以取。这点与sessionStorage相同，但是与sessionStorage不同的是，localStorage设定后，新开tab是可以访问到的

 

存储时间：

    localStorage理论上讲是永久性质的存储。只要用户不主动清除，那么就会一直存在

大小：

    localStorage的大小一般限定为4M左右

使用场景：

    由于localStorage的稳定性质，及其长效的存储，可以帮助服务器分担一些压力

注意：　　

　IE9 localStorage不支持本地文件，需要将项目署到服务器，才可以支持！

检测方法：

if(window.localStorage){   
alert('This browser supports localStorage');   
}else{   
alert('This browser does NOT support localStorage');   
}