浏览器的本地存储方案

# 浏览器知识系列之本地存储
### 什么是“本地存储”？
浏览器本地存储是一种机制，允许Web应用程序在浏览器端**存储数据**，以便用户在下次访问时可以快速获取和使用这些数据。
### 浏览器本地存储的种类
浏览器的本地存储主要分为：
1. **Cookie** 
2. **WebStorage** ——分为`localStorage`和`sessionStorage`
3. **IndexedDB**

### Cookie
其实从起源上来说，`Cookie`的诞生是为了解决`HTTP`是**无状态协议**这个问题的，最开始用`HTTP`通信，由于没法记录状态，服务器不能清楚地知道客户端是谁，也就无法帮他省下复杂操作（如多次登陆），`Cookie`就是用来解决这个问题的。

#### Cookie的构成：
`Cookie`本质上只是一小段文本字符串，该字符串一般保存在用户计算机特定文件夹下的某个文件中，它的内部格式是键值对。其中又有一些比较重要的属性：
1. **name=value**：键值对，可以设置要保存的Key/Value。
2. **expires和max-age**：`Cookie`的过期时间，如果这个属性不指定的话，就是`session cookie`，也就是这个`session`在关闭浏览器后就会被删除。
    1. `expires`是一个`GMT`格式的时间串。
    2. `max-age`在`HTTP/1.1`中代替`expires`，是以**秒为单位**的时间段。`Cookie`失效时刻=创建时刻+`max-age` 
3. **path**：相当于`Cookie`的作用域，子文件夹下的网页可以访问父文件夹下的网页生成的`Cookie`，但是反过来却不能，例如：
    1. 路径`/`：生成`cookie_a`
    2. 路径`/sub`生成`cookie_b`
    3. 则`/`路径只能读取`cookie_a`，而`/sub`路径可以读取`cookie_a`和`cookie_b`。
注意，如果不设置这个属性的话，默认使用的是当前的`url`的相对路径。一般我们设置`Cookie`，就是让网站中所有其他的网页都能读取到的，所以应该将其设置为`'/'`。

4. **domain**：`Cookie`的所属域名，默认是全域名，也可以自己指定根域名。例如在`www.tuland.com`上设置`Cookie`，`domin`就是`tuland.com`，这样的话如果当前网站旗下有子域名网站的话，例如`a.tuland.com`，`b.tuland.com`之类的子域名，那么在子域名所在网站中也能读取到这个`Cookie`。

5. **secure**：这个属性是针对`HTTPS`来说的，如果设定其为`true`的话，那么只有在`HTTPS`协议下才会携带`Cookie`。默认为空。

6. **httponly**：这个属性设置`js`对于当前`cookie`的读取权限，如果为`true`，则`js`无法**读取、修改、删除**当前`Cookie`。默认为空

![Cookie1.jpg][1]

#### Cookie的使用和设置
可以分为三个步骤：
1. **服务器发送`Cookie`**：当客户端第一次访问服务器时，服务器会通过**响应头**要求客户端设置`Cookie`。例如：`**Set-Cookie**:name=tuland; Path=/`
2. **客户端接收并保存`Cookie`**：客户端接收到`Cookie`后，会将其保存在本地。 
3. **客户端再次请求时携带`Cookie`**：当客户端再次请求服务器时，会将之前保存的`Cookie`发送到服务器端，例如 `Cookie:name=tuland;`。此外，客户端JS脚本也可以通过`document.cooke = "name='tuland'"`等方式来设置`Cookie`。

#### Cookie的一些缺点
1. 存储大小只有**4kb**。
2. `HTTP`请求时会携带`Cookie`，会增加请求的数据量。
3. 只能用`document.cooke = ...`方式修改，太过简陋。
4. 不同的浏览器，`Cookie`有不同的上限。（`Chrome`没有）

#### Cookie的安全性 
虽然`Cookie`在WEB应用中非常有用，但是我们在使用过程中也需要注意一些安全问题：
1. `Cookie`可能被客户端篡改，所以在使用前我们需要验证其合法性。
2. 不要在`Cookie`中存储敏感数据，比如用户密码，账户余额。
3. 使用`httpOnly`属性可以防止通过`JS`脚本读取到`Cookie`信息，从而防止`XSS`攻击。
4. 尽量减少`Cookie`的体积，这样可以减少数据传输的时间和带宽消耗。

#### Cookie和Seesion的区别
1. `Cookie`存在客户端上；`Session`会话存在服务器上。
2. `Cookie`有预先设置的生存周期或永久保存于本地；`Session`在页面关闭时就消失了。
3. 单个`Cookie`不超过`4KB`，只能存键值对；`Session`对象没有对存储数据量的限制，其中可以保存更为复杂的数据类型。
4. 设置`Cookie`属性可以使`Cookie`过期；但是使用`session-destory()`，将销毁会话。
5. `cookie`不是很安全，但可以加密；`session`比较安全，但容易失效。
   
### localStorage
`localStorage`有一点跟`Cookie`一样，就是针对一个域名，即在同一个域名下，会存储相同的一段`localStorage`。
不过它相对`Cookie`还是有相当多的区别的:
1. **容量**：`localStorage`的容量上限为`5MB`，相比于`Cookie`的`4KB`大大增加。当然这个`5MB`是针对一个域名的，因此对于一个域名是持久存储的。
2. 只存在客户端，**默认不参与**与服务端的通信。这样就很好地避免了`Cookie`带来的性能问题和安全问题。
3. 接口封装简单易用。通过它的`setItem`、`getItem`、`removeItem`、`clear`等方法进行操作，非常方便。

#### 操作方式
接下来我们来具体看看如何来操作localStorage。
```
let obj = { name: "tuland", age: 18 };
localStorage.setItem("name", "tuland"); 
localStorage.setItem("info", JSON.stringify(obj));
```

接着进入**相同的域名**或符合`path`规则的子域名下就能拿到相应的值:
```
let name = localStorage.getItem("name");
let info = JSON.parse(localStorage.getItem("info"));
```

从这里可以看出，localStorage其实存储的都是字符串，如果是存储对象需要调用JSON的stringify方法，并且用JSON.parse来解析成对象。
应用场景
利用localStorage的较大容量和持久特性，可以利用localStorage存储一些内容稳定的资源，比如官网的logo，存储Base64格式的图片资源，因此利用localStorage

### sessionStorage
`sessionStorage`和`localStorage`非常相似，存储空间和API都一模一样，但只有一个本质的区别，**那就是前者只是会话级别的存储，并不是持久化存储。**会话结束，也就是页面关闭，这部分`sessionStorage`就不复存在了。

### WebStorage 和 Cookie的区别
| 特性  | Cookie  | localStorage  | sessionStorage  |
|  ----  | ----  |----           | ----  |
| 生命周期| 由服务器生成，可设置失效时间。默认是关闭服务器后失效 |除非被清除，否则永久保存 |仅在当前会话有效，关闭标签页或浏览器后失效 |
| 存储空间大小  | 4KB |5MB |5MB |
| 与服务端通信  | 每次都会携带在http请求头中 |仅在客户端中保存，默认不参与通信 | 同左 |
| 共享规则  | 在同源且符合path规则下的域名间共享 |在同源文档间共享，即协议、域名、端口相同，不同子域名可以用同一个父域名的端口 |受同源策略影响，还需要同个窗口 |
| 用途  | 用于标识用户身份 |用于缓存数据，保存用户习惯信息，如：最近的搜索项、最近访问页面 |表单信息进行维护，保证页面即使刷新也不会让之前的表单信息丢失 |

相同点 ：三者都可以用来在浏览器端存储数据，而且都是字符串类型的**键值对**形式

### IndexedDB
`IndexedDB`是运行在浏览器中的非关系型数据库, 本质上是数据库，绝不是和刚才WebStorage的 5M 一个量级，理论上这个容量是没有上限的。
关于它的使用， MDN 上的[教程文档][2]已经非常详尽。

接着我们来分析一下`IndexedDB`的一些重要特性，除了拥有数据库本身的特性，比如**支持事务**，**存储二进制数据**，还有这样一些特性需要格外注意：

1. 键值对存储。内部采用**对象仓库**存放数据，在这个对象仓库中数据采用**键值对**的方式来存储。
2. 异步操作。数据库的读写属于 I/O 操作, 浏览器中对异步 I/O 提供了支持。
3. 受同源策略限制，即无法访问跨域的数据库。

[1]: http://120.25.166.245/usr/uploads/2022/03/919913199.jpg
  [2]: https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB

5 条评论

rauahmwgnh
February 28th, 2025 at 07:34 pm

结论部分可提出实际应用建议，提升价值。

回复
dyhilomauk
December 25th, 2024 at 06:34 pm

《诡计多端2002》泰国剧高清在线免费观看：https://www.jgz518.com/xingkong/135163.html

回复
gvbhlqbgmy
December 7th, 2024 at 03:25 pm

《最终幻想7：终极指令》动画片高清在线免费观看：https://www.jgz518.com/xingkong/34544.html

回复
bfrsdpjiwv
December 5th, 2024 at 07:37 pm

《特警判官国语》动作片高清在线免费观看：https://www.jgz518.com/xingkong/107024.html

回复
jqlknmeojx
November 30th, 2024 at 03:16 pm

《最终幻想7：终极指令》动画片高清在线免费观看：https://www.jgz518.com/xingkong/34544.html

回复