localStorage、sessionStorage、cookie的区别

我就是我 2022-09-02 13:53 135阅读 0赞

# 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保存过多的信息会带来性能问题。