【前端性能优化】本地存储（Web Storage）

矫情吗；* 2023-02-13 11:21 46阅读 0赞

### 目录 ###

*   *   *  1. Cookie
         *   *  1.1 特性
             *  1.2 使用方法
             *  1.3 使用场景
         *  2. localStorage
         *   *  2.1 优点
             *  2.2 缺点
             *  2.3 常用API
             *  2.4 使用场景
         *  3. SessionStorage
         *   *  3.1 与LocalStorage对比
             *  3.2 常用API
             *  3.3 使用场景
         *  4. 三者区别
         *   *  2.1 相同点
             *  2.2 不同点

**Cookie**、**localStorage**、**sessionStorage**是浏览器常用的三种储存方式。  
![在这里插入图片描述][2020080516071245.png]

### 1. Cookie ###

Cookie是最早被提出来的本地存储方式，在此之前，服务端是无法判断网络中的两个请求是否是同一用户发起的，为解决这个问题，Cookie就出现了。Cookie的大小只有4kb，它是一种纯文本文件，每次发起HTTP请求都会携带Cookie。

#### 1.1 特性 ####

*  Cookie一旦创建成功，名称就无法修改
 *  Cookie是无法跨域名的，也就是说a域名和b域名下的cookie是无法共享的，这也是由Cookie的隐私安全性决定的，这样就能够阻止非法获取其他网站的Cookie
 *  每个域名下Cookie的数量不能超过20个，每个Cookie的大小不能超过4kb
 *  有安全问题，如果Cookie被拦截了，那就可获得session的所有信息，即使加密也于事无补，无需知道cookie的意义，只要转发cookie就能达到目的

注意：

> 如果需要域名之间跨域共享Cookie，有两种方法：
> 
> 1.  使用Nginx反向代理
> 2.  在一个站点登陆之后，往其他网站写Cookie。服务端的Session存储到一个节点，Cookie存储sessionId

#### 1.2 使用方法 ####

Cookie由以下字段组成：

*  **Name**：cookie的名称
 *  **Value**：cookie的值，对于认证cookie，value值包括web服务器所提供的访问令牌；
 *  **Size** ： cookie的大小
 *  **Path** ： 可以访问此cookie的页面路径。 比如domain是abc.com，path是`/test`，那么只有`/test`路径下的页面可以读取此cookie。
 *  **Secure**： 指定是否使用HTTPS安全协议发送Cookie。使用HTTPS安全协议，可以保护Cookie在浏览器和Web服务器间的传输过程中不被窃取和篡改。该方法也可用于Web站点的身份鉴别，即在HTTPS的连接建立阶段，浏览器会检查Web网站的SSL证书的有效性。但是基于兼容性的原因（比如有些网站使用自签署的证书）在检测到SSL证书无效时，浏览器并不会立即终止用户的连接请求，而是显示安全风险信息，用户仍可以选择继续访问该站点。
 *  **Domain**：可以访问该cookie的域名，Cookie 机制并未遵循严格的同源策略，允许一个子域可以设置或获取其父域的 Cookie。当需要实现单点登录方案时，Cookie 的上述特性非常有用，然而也增加了 Cookie受攻击的危险，比如攻击者可以借此发动会话定置攻击。因而，浏览器禁止在 Domain 属性中设置.org、.com 等通用顶级域名、以及在国家及地区顶级域下注册的二级域名，以减小攻击发生的范围。
 *  **HTTP**： 该字段包含`HTTPOnly` 属性 ，该属性用来设置cookie能否通过脚本来访问，默认为空，即可以通过脚本访问。在客户端是不能通过js代码去设置一个httpOnly类型的cookie的，这种类型的cookie只能通过服务端来设置。该属性用于防止客户端脚本通过`document.cookie`属性访问Cookie，有助于保护Cookie不被跨站脚本攻击窃取或篡改。但是，HTTPOnly的应用仍存在局限性，一些浏览器可以阻止客户端脚本对Cookie的读操作，但允许写操作；此外大多数浏览器仍允许通过XMLHTTP对象读取HTTP响应中的Set-Cookie头。
 *  **Expires/Max-size** ： 此cookie的超时时间。若设置其值为一个时间，那么当到达此时间后，此cookie失效。不设置的话默认值是Session，意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页，而是整个浏览器) 后，此cookie失效。

#### 1.3 使用场景 ####

*  最常见的使用场景就是Cookie和session结合使用，我们将sessionId存储到Cookie中，每次发请求都会携带这个sessionId，这样服务端就知道是谁发起的请求，从而响应相应的信息。
 *  可以用来统计页面的点击次数

### 2. localStorage ###

**Storage**包含localStorage和sessionStorage。

LocalStorage是HTML5新引入的特性，由于有的时候我们存储的信息较大，Cookie就不能满足我们的需求，这时候LocalStorage就派上用场了。

#### 2.1 优点 ####

*  在大小方面，LocalStorage的大小一般为5MB，可以储存更多的信息
 *  LocalStorage是持久储存，并不会随着页面的关闭而消失，除非主动清理，不然会永久存在
 *  仅储存在本地，不像Cookie那样每次HTTP请求都会被携带

#### 2.2 缺点 ####

*  存在浏览器兼容问题，IE8以下版本的浏览器不支持
 *  如果浏览器设置为隐私模式，那我们将无法读取到LocalStorage
 *  LocalStorage受到同源策略的限制，即端口、协议、主机地址有任何一个不相同，都不会访问

#### 2.3 常用API ####

// 保存数据到 localStorage
    localStorage.setItem('key', 'value');
    
    // 从 localStorage 获取数据
    let data = localStorage.getItem('key');
    
    // 从 localStorage 删除保存的数据
    localStorage.removeItem('key');
    
    // 从 localStorage 删除所有保存的数据
    localStorage.clear();
    
    // 获取某个索引的Key
    localStorage.key(index)

#### 2.4 使用场景 ####

*  有些网站有换肤的功能，这时候就可以将换肤的信息存储在本地的LocalStorage中，当需要换肤的时候，直接操作LocalStorage即可
 *  在网站中的用户浏览信息也会存储在LocalStorage中，还有网站的一些不常变动的个人信息等也可以存储在本地的LocalStorage中

### 3. SessionStorage ###

SessionStorage和LocalStorage都是在HTML5才提出来的存储方案，SessionStorage 主要用于临时保存同一窗口(或标签页)的数据，刷新页面时不会删除，关闭窗口或标签页之后将会删除这些数据

#### 3.1 与LocalStorage对比 ####

*  SessionStorage和LocalStorage都在**本地进行数据存储**；
 *  SessionStorage也有同源策略的限制，但是SessionStorage有一条更加严格的限制，SessionStorage**只有在同一浏览器的同一窗口下才能够共享**；
 *  LocalStorage和SessionStorage**都不能被爬虫爬取**；

#### 3.2 常用API ####

// 保存数据到 sessionStorage
    sessionStorage.setItem('key', 'value');
    
    // 从 sessionStorage 获取数据
    let data = sessionStorage.getItem('key');
    
    // 从 sessionStorage 删除保存的数据
    sessionStorage.removeItem('key');
    
    // 从 sessionStorage 删除所有保存的数据
    sessionStorage.clear();
    
    // 获取某个索引的Key
    sessionStorage.key(index)

#### 3.3 使用场景 ####

由于SessionStorage具有时效性，所以可以用来存储一些网站的游客登录的信息，还有临时的浏览记录的信息。当关闭网站之后，这些信息也就随之消除了。

### 4. 三者区别 ###

#### 2.1 相同点 ####

三者都保存在浏览器端，而且是同源的。

#### 2.2 不同点 ####

*  **大小不同：**
    
     *  Cookie 大小一般为4K
     *  localStorage 大小一般为5M
     *  sessionStorage 大小一般为5M
 *  **有效期不同：**
    
     *  Cookie 在有效期之内有效，超过有效期就会失效
     *  localStorage 永久有效，直到手动去删除
     *  sessionStorage 在当前会话内有效，刷新页面不会失效，关闭窗口或标签页之后就会失效
 *  **通信方式不同：**
    
     *  Cookie会发送到服务端，存储在内存中
     *  localStorage 不会发送到服务端，存储在浏览器端
     *  sessionStorage 不会发送到服务端，存储在浏览器端
 *  **路径不同：**
    
     *  Cookie有路径限制
     *  localStorage 储存在域名下
     *  sessionStorage 储存在域名下
 *  **API：**
    
     *  Cookie没有特定的API
     *  localStorage 有特定的API
     *  sessionStorage 有特定的API

[2020080516071245.png]: https://img-blog.csdnimg.cn/2020080516071245.png