Chrome 存储介绍

>i 在 Chrome 浏览器的开发者工具（DevTools）中的 Application 面板下，有多种存储类型可供查看和管理。以下是这些存储类型的详细介绍：

- Local Storage
- Session storage
- IndexedDB
- Cookies
- Private state tokens
- Interest groups
- Shared storage
- Cache storage
- Storage buckets

## 1. Local Storage

**简介**：
- Local Storage 是一种 HTML5 提供的存储技术，用于在客户端存储大量数据。

**特点**：
- 每个域名可以存储约 5MB 的数据。
- 数据持久化，除非手动删除，否则不会过期。
- 只能存储字符串类型的数据。

**用途**：
- 存储用户偏好设置。
- 存储应用状态数据。

**示例**：
```javascript
// 设置数据
localStorage.setItem("username", "JohnDoe");

// 读取数据
const username = localStorage.getItem("username");
console.log(username);

// 删除数据
localStorage.removeItem("username");

// 清空所有数据
localStorage.clear();
```

## 2. Session Storage

**简介**：
- Session Storage 与 Local Storage 类似，但数据仅在会话期间有效。

**特点**：
- 每个域名可以存储约 5MB 的数据。
- 数据在浏览器会话结束（如关闭标签页或浏览器）时删除。
- 只能存储字符串类型的数据。

**用途**：
- 存储临时数据，如表单输入数据。
- 存储会话状态数据。

**示例**：
```javascript
// 设置数据
sessionStorage.setItem("sessionID", "123456");

// 读取数据
const sessionID = sessionStorage.getItem("sessionID");
console.log(sessionID);

// 删除数据
sessionStorage.removeItem("sessionID");

// 清空所有数据
sessionStorage.clear();
```

## 3. IndexedDB

**简介**：
- IndexedDB 是一种低级 API，用于在客户端存储大量结构化数据。

**特点**：
- 支持存储大量数据（通常为数百 MB 或更多）。
- 支持事务、索引和查询。
- 数据持久化，除非手动删除，否则不会过期。

**用途**：
- 存储复杂的数据结构，如对象和文件。
- 离线应用数据存储。

**示例**：
```javascript
// 打开数据库
const request = indexedDB.open("myDatabase", 1);

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore("users", { keyPath: "id" });
  objectStore.createIndex("name", "name", { unique: false });
};

request.onsuccess = function(event) {
  const db = event.target.result;

// 添加数据
  const transaction = db.transaction(["users"], "readwrite");
  const objectStore = transaction.objectStore("users");
  objectStore.add({ id: 1, name: "John Doe" });

// 读取数据
  const getRequest = objectStore.get(1);
  getRequest.onsuccess = function(event) {
    console.log(getRequest.result);
  };
};
```

## 4. Cookies

**简介**：
- Cookie 是一种最早期的浏览器存储技术，用于在客户端存储少量数据。

**特点**：
- 每个 Cookie 的大小限制为约 4KB。
- Cookie 会随着每个 HTTP 请求发送到服务器，因此会增加网络流量。
- Cookie 可以设置过期时间，默认情况下会在浏览器会话结束时删除。

**用途**：
- 会话管理（如用户登录状态）。
- 用户偏好设置。
- 跟踪用户行为（如广告跟踪）。

**示例**：
```javascript
// 设置 Cookie
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";

// 读取 Cookie
const cookies = document.cookie;
console.log(cookies);
```

## 5. Private State Tokens

**简介**：
- Private State Tokens 是一种新的隐私保护机制，用于防止跨站点跟踪和欺诈。

**特点**：
- 提供一种隐私保护的方式来验证用户的状态。
- 防止跨站点跟踪和欺诈。

**用途**：
- 验证用户的状态而不暴露用户的隐私信息。

## 6. Interest Groups

**简介**：
- Interest Groups 是一种用于广告投放的机制，允许广告商根据用户的兴趣投放广告。

**特点**：
- 用户可以加入或退出兴趣组。
- 广告商可以根据兴趣组投放广告。

**用途**：
- 提高广告的相关性和效果。

## 7. Shared Storage

**简介**：
- Shared Storage 是一种新的存储机制，允许多个域名共享存储数据。

**特点**：
- 提供一种跨域名共享数据的方式。
- 数据可以在多个域名之间共享。

**用途**：
- 跨域名共享数据，如用户偏好设置。

## 8. Cache Storage

**简介**：
- Cache Storage 是一种用于存储网络请求和响应的存储机制。

**特点**：
- 支持存储网络请求和响应。
- 提供离线访问能力。

**用途**：
- 存储静态资源，如 HTML、CSS、JavaScript 文件。
- 提供离线访问能力。

**示例**：
```javascript
// 打开缓存
caches.open('my-cache').then(function(cache) {
  // 添加资源到缓存
  cache.add('/index.html');
});

// 读取缓存
caches.match('/index.html').then(function(response) {
  if (response) {
    response.text().then(function(text) {
      console.log(text);
    });
  }
});
```

## 9. Storage Buckets

**简介**：
- Storage Buckets 是一种新的存储机制，允许开发者创建和管理多个存储桶，每个存储桶可以有不同的存储策略。

**特点**：
- 提供一种灵活的存储管理方式。
- 每个存储桶可以有不同的存储策略。

**用途**：
- 管理不同类型的数据存储，如临时数据和持久数据。

## 总结

Chrome 浏览器提供了多种存储技术，每种技术都有其独特的特点和适用场景。选择合适的存储技术可以提高应用的性能和用户体验。通过 Chrome 开发者工具中的 Application 面板，可以方便地查看和管理这些存储数据。