前端的本地存储 --- cookie/session/localStorage/sessionStorage

1、cookie：

本身用于客户端和服务端通信，每次http请求都会携带cookie。但具有本地存储的功能。缺点是容量少(4kb);安全性低;浪费带宽资源(每次请求携带)。

Cookie中存放的信息包含cookie本身属性和用户自定义属性，cookie的信息由键/值对组成，但一个cookie只能包含一个自定义键/值对。Cookie本身属性有”Comment” 、”Domain”、”Max-Age”、”Path”、”Secure”、”Version”。

最简单的cookie设置：

// 设置最简单的cookie
document.cookie = `${username}=${password};`;
// 获取
var cookie = document.cookie;

Comment 属性是cookie的产生着对该cookie的描述。

Domain 属性定义可访问该cookie的域名，对一些大的网站，如果希望cookie可以在子网站中共享，可以使用该属性。例如设置Domain为 .bigsite.com ,则sub1.bigsite.com和sub2.bigsite.com都可以访问已保存在客户端的cookie，这时还需要将Path设置为/。

// 若需要将"sports.qq.com"下的cookie被"www.qq.com"访问
document.cookie = "username=Darren;path=/;domain=qq.com"

Max-Age 属性定义cookie的有效时间，单位是秒，当超过有效期后，cookie的信息不会从客户端附加在HTTP消息头中发送到服务端。

Path 属性定义网站上可以访问cookie的页面的路径，缺省状态下Path为产生cookie时的路径，此时cookie可以被该路径以及其子路径下的页面访问；设置为 / 时候，cookie可以被网站下所有页面访问。

Secure 属性值定义cookie的安全性，当该值为true时必须是HTTPS状态下cookie才从客户端附加在HTTP消息中发送到服务端，在HTTP时cookie是不发送的；Secure为false时则可在HTTP状态下传递cookie，Secure缺省为false。

// 以 https 方式发送cookie，但本地cookie并不加密
document.cookie = "username=Darren;secure"

Version 属性定义cookie的版本，由cookie的创建者定义。

 

---

2、session：

与cookie类似。存储在后台服务器，但sessionID是存储在本地。针对Web网站来说，Session指用户在浏览某个网站时，从进入网站到浏览器关闭这段时间内的会话。常见的形式就是配合Cookie使用，保持用户登录状态。缺点是不适用并发数较高的网站(多人访问会存储大量session)。

 

---

3、localStorage、sessionStorage：

Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。两者区别在于sessionStorage生命周期到标签页关闭；而localStorage是永久保存直到手动删除。最大存储量为5M。

使用：

// sessionStorage用法与localStorage一致
// 保存数据
window.localStorage.setItem("key", "value");
// 读取数据
var lastname = localStorage.getItem("key");
// 删除数据
localStorage.removeItem("key");

注意：iOS safari的隐藏模式下使用localStorage.getItem会报错，建议统一使用try-catch封装。

 

 

参考：【https://www.jeffjade.com/2016/10/31/115-summary-of-cookie/】【http://www.runoob.com/jsref/obj-storage.html】