localStorage、sessionStorage、cookie的区别

localStorage、sessionStorage、cookie的区别

WebStorage本地存储

• localStorage
• sessionStorage

---

localStorage：

• 本地存储
• 生命周期是永久，除非自己手动清除，否则这些信息将永久存在
• 存储在客户端，数据大小为5MB

sessionStorage:

• 仅在当前会话下有效，关闭页面或浏览器后被清除。
• 存放的数据大小为5MB，仅在浏览器中保存

---

WebStorage的目标:

• 提供一种在cookie之外存储会话数据的路径
• 提供一种存储大量可以跨会话存在的数据的机制
• HTML5 提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）

---

作用域不同：

• 不同浏览器无法共享localStorage或sessionStorage中的信息。
• 相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名、端口），但是不同页面或标签页间无法共享sessionStorage的信息。但是这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的

---

存储大小：
sessionStorage和localStorage都是存放5MB

存储位置：
sessionStorage和localStorage都是存储在客户端，并且不参与服务器之间的通信

存储内容类型：
localStorage和sessionStorage只能存储字符串类型，一般使用JSON.stringify和JSON.parse来处理

获取方式：

• localStorage：window.localStorage
• sessionStorage：window.sessionStorage

---

**应用场景：** - localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据 - sessionStorage：敏感账号一次性登录

---

WebStorage的优点： - 存储空间大，cookie为4kb，而WebStorage为5MB - 不会参与与服务器之间的通信，在本地就能获取到，所以能够节省网络流量并且快速获取到。 - WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie较高一些。

---

## Cookie - 失效时间：一般是浏览器关闭失效，可以自己设置失效时间。 - HTTP Cookie简称cookie,在HTTP请求发送Set-Cookie HTTP头作为响应的一部分。通过name=value的形式存储 - 会与服务器进行通信，每次请求会放在HTTP头中，如果使用cookie保存过多的信息会带来性能问题。