在前端开发中，往往会将有些不经常更改的数据缓存到本地，比如用户信息。前端本地缓存的方式有多种，比如SessionStorage、localStorage 以及 cookies 等。那么这个几个缓存有什么区别，各自又有什么特点呢？将是本文分享的重点。

一、cookie

1. cookie是什么

网络早期最大的问题之一是如何管理状态。简而言之，服务器无法知道两个请求是否来自同一个浏览器。当时最简单的方法是在请求时，在页面中插入一些参数，并在下一个请求中传回参数。这需要使用包含参数的隐藏的表单，或者作为URL参数的一部分传递。这两个解决方案都手动操作，容易出错。cookie出现来解决这个问题。

2. cookie原理

第一次访问网站，浏览器会发送一个请求，服务器响应这个请求，会将cookie放进响应体中。

第二次访问网站，浏览器发送的请求带有cookie，服务器会辨别这个用户的身份。

2. cookie的属性

（1）Name：cookie的名字，一个域名下绑定的cookie的name不能相同。如果是相同的name则会被覆盖。

（2）value：每个cookie拥有的属性，表示cookie的值。

（3）domain：cookie的域名。cookie绑定的域名，如果没有设置，自动绑定当前执行语句的的域。同一个域名下的二级域名也是不可以交换cookie的。

（4）path：path是默认属性’/'，匹配web路由。

（5）Expires：expires是cookie的有效期。一般浏览器的cookie是默认存储的，关闭浏览器结束会话，cookie就会被删除。

如果想要cookie续存一段时间，可以通过设置expires有效期。

expires现在被Max-Age取代：Max-Age，是以秒为单位的，Max-Age为正数时，cookie会在Max-Age秒之后，被删除；当Max-Age为负数时，表示的是临时储存，不会生出cookie文件，只会存在浏览器内存中，且只会在打开的浏览器窗口或者子窗口有效，一旦浏览器关闭，cookie就会消失；当Max-Age为0时，删除cookie，因为cookie机制本身没有设置删除cookie，失效的cookie会被浏览器自动从内存中删除，所以，它实现的就是让cookie失效。

（6）secure：安全。http无状态无加密，不安全协议容易被攻击挟持。比如你在浏览页面的时候是不是会有小广告出来。这个secure属性为true的时候，这个时候的cookie只会在https和ssl等安全协议下传输。不能对cookie加密，绝对安全保证做不到。

（7）httpOnly：安全的 Cookie 需要经过 HTTPS 协议通过加密的方式发送到服务器。即使是安全的，也不应该将敏感信息存储在cookie 中，因为它们本质上是不安全的，并且此标志不能提供真正的保护。

3. cookie两种类型—会话cookie和永久性cookie

（1）一种是Session Cookies：客户端关闭，数据删除，永久丢失。没有指定的Expires/Max-Age指令，存储在内存。

（2）一种是Persistent Cookies：客户端关闭，数据不会删除。当Expires或者Max-Age过期，才会删除数据，存储在磁盘。

4.cookie的缺点

存储大小有限最大4KBhttp请求时会自动发送给服务器, 增加了请求的数据量原生的操作语法不太方便操作cookie浏览器可以设置禁用

二、SessionStorage

SessionStorage 顾名思义就是存在与会话阶段，当会话结束时，SessionStorage 存储的数据即会失效。那么关键来了什么才表示会话结束？其实在浏览器中一个活动标签页即代表一个会话Session，如果当前标签页被关掉即代表，当前会话结束，此时当前 SessionStorage 中存储的数据就会被浏览器自动销毁。

1.SessionStorage的用法

sessionStorage.setItem(key,value)：存储数据，接收2个参数，一个是 key，一个是 value。

sessionStorage.getItem(key)：获取数据，接收1个参数，参数为 key，可获取 value。

sessionStorage.removeItem(key)：移除指定数据，接收1个参数，参数为 key，移除相应的 value。

sessionStorage.clear()：移除所有数据，无参数。

//存储缓存数据

sessionStorage.setItem("name", "jack");

sessionStorage.setItem("age", 18);

//获取缓存数据

var name = sessionStorage.getItem("name");

var age = sessionStorage.getItem("age");

console.log(name)//"jack"

console.log(age)//18

//移除指定缓存

// sessionStorage.removeItem("name");//移除name缓存

//移除所有缓存

// sessionStorage.clear(); 移除所有缓存

// 获取引用类型

//存储缓存数据

sessionStorage.setItem("data", JSON.stringify({ name: "jack", age: 18 }));

// 获取缓存数据

var data = JSON.parse(sessionStorage.getItem("data"));

console.log(data)//{name:"jack",age:18};

2.SessionStorage失效时间

sessionStorage的生命周期仅在当前会话有效。sessionStorage引入了“浏览器窗口的概念”。sessionStorage在同源窗口中始终存在数据，只要浏览器窗口没有关闭，刷新或者重新进入页面数据依然存在。关闭浏览器窗口后数据会被删除。再次独立打开同一个窗口同一个页面，sessionStorage也是不一样。

3.SessionStorage存储的位置

sessionStorage都保存在客户端，一般不与服务器进行通信交互。

4.SessionStorage存储的大小

sessionStorage存储数据大小一般是5MB

三、localStorage

localStorage理论上来说是永久有效的，即不主动清空的话就不会消失，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错。但需要注意的是，在移动设备上的浏览器或各Native App用到的WebView里，localStorage都是不可靠的，可能会因为各种原因（比如说退出App、网络切换、内存不足等原因）被清空。

1.localStorage的用法

localStorage.setItem(key,value)：存储数据，接收2个参数，一个是 key，一个是 value。

localStorage.getItem(key)：获取数据，接收1个参数，参数为 key，可获取 value。

localStorage.removeItem(key)：移除指定数据，接收1个参数，参数为 key，移除相应的 value。

localStorage.clear()：移除所有数据，无参数。

//存储缓存数据

localStorage.setItem("name", "jack");

localStorage.setItem("age", 18);

//获取缓存数据

var name = localStorage.getItem("name");

var age = localStorage.getItem("age");

console.log(name)//"jack"

console.log(age)//18

//移除指定缓存

// localStorage.removeItem("name");//移除name缓存

//移除所有缓存

// localStorage.clear(); 移除所有缓存

//存储缓存数据

localStorage.setItem("data", JSON.stringify({ name: "jack", age: 18 }));

//获取缓存数据

var data = JSON.parse(localStorage.getItem("data"));

console.log(data)//{name:"jack",age:18};

2.localStorage的失效时间

localStorage的生命周期是永久的，关闭页面或者浏览器之后localStorage中的数据也不会消失。localStorage删除数据要手动删除，否则数据永远不会消失。

3.localStorage存储的位置

localStorage都保存在客户端，一般不与服务器进行通信交互。

4.localStorage存储的大小

localStorage存储数据大小一般是5MB

四、localStorage与sessionStorage区别

1.相同点

纯浏览器端存储, 存储空间在 2.5M 到 10M 之间（各浏览器不同）, 请求时不会自动携带只能保存文本, 如果是对象或数组, 需要转换为JSON

2.不同点

localStorage保存在本地文件中, 除非编码或手动删除, 否则一直存在sessonStorage数据保存在当前会话内存中, 关闭浏览器则清除

五、cookie与其他两种的区别

存储的容量大小，cookie最大只有4KB请求时是否自动携带API的易用性

六、总结

Cookie、SessionStorage、 LocalStorage都是浏览器的本地存储。它们的共同点：都是存储在浏览器本地的。它们的区别：cookie是由服务器端写入的，而SessionStorage、 LocalStorage都是由前端写入的，cookie的生命周期是由服务器端在写入的时候就设置好的，LocalStorage是写入就一直存在，除非手动清除，SessionStorage是页面关闭的时候就会自动清除。cookie的存储空间比较小大概4KB，SessionStorage、 LocalStorage存储空间比较大，大概5M。Cookie、SessionStorage、 LocalStorage数据共享都遵循同源原则，SessionStorage还限制必须是同一个页面。在前端给后端发送请求的时候会自动携带Cookie中的数据，但是SessionStorage、 LocalStorage不会。

由于它们的以上区别，所以它们的应用场景也不同，Cookie一般用于存储登录验证信息SessionID或者token，LocalStorage常用于存储不易变动的数据，减轻服务器的压力，SessionStorage可以用来检测用户是否是刷新进入页面，如音乐播放器恢复播放进度条的功能。