聊一聊常见的浏览器数据存储方案（下）-阿里云开发者社区

聊一聊常见的浏览器数据存储方案（上）https://developer.aliyun.com/article/1411395

（3）Cookie 属性

下面来深入了解 cookie 的属性。除了名称和值之外，cookie 还具有控制很多方面的属性，包括安全方面、生命周期以及它们在浏览器中的访问位置和方式等。

① Domain

Domain 属性告诉浏览器允许哪些主机访问 cookie。如果未指定，则默认为设置 cookie 的同一主机。因此，当使用客户端 JavaScript 访问 cookie 时，只能访问与 URL 域相同的 cookie。同样，只有与 HTTP 请求的域共享相同域的 cookie 可以与请求头一起发送到服务端。

注意，拥有此属性并不意味着可以为任何域设置 cookie，因为这显然会带来巨大的安全风险。此属性存在的唯一原因就是减少域的限制并使 cookie 在子域上可访问。例如，如果当前的域是 abc.xyz.com，并且在设置 cookie 时如果不指定 Domain 属性，则默认为 abc.xyz.com，并且 cookie 将仅限于该域。但是，可能希望相同的 cookie 也可用于其他子域，因此可以设置 Domain=xyz.com 以使其可用于其他子域，如 def.xyz.com 和主域 xyz.com。

1.webp.jpg

② Path

此属性指定访问 cookie 必须存在的请求 URL 中的路径。除了将 cookie 限制到域之外，还可以通过路径来限制它。路径属性为 Path=/store 的 cookie 只能在路径 /store 及其子路径 /store/cart、/store/gadgets 等上访问。

③ Expires/Max-size

该属性用来设置 cookie 的过期时间。若设置其值为一个时间，那么当到达此时间后，cookie 就会失效。不设置的话默认值是 Session，意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页) 后，cookie 就会失效。

除此之外，它还可以通过将过期日期设置为过去来删除 cookie。

④ Secure

具有 Secure 属性的 cookie 仅可以通过安全的 HTTPS 协议发送到服务器，而不会通过 HTTP 协议。这有助于通过使 cookie 无法通过不安全的连接访问来防止中间人攻击。除非网站实用不安全的 HTTP 连接，否则应该始终将此属性与所有 cookie 一起使用。

⑤ HTTPOnly

此属性使 cookie 只能通过服务端访问。因此，只有服务断可以通过响应头设置它们，然后浏览器会将它们与每个后续请求的头一起发送到服务器，并且它们将无法通过客户端 JavaScript 访问。

2.webp (1).jpg

这可以在一定程度上帮助保护带有敏感信息（如身份验证 token）的 cookie 免受 XSS 攻击，因为任何客户端脚本都无法读取 cookie。但这并不意味着可以完全免受 XSS 攻击。因为，如果攻击者可以在网站上执行第三方脚本，那可能无法访问 cookie，相反，他们可以直接向服务端执行相关的 API 请求。因此，想象一下用户访问了一个页面，黑客在网站上注入了恶意脚本。他们可以使用该脚本执行任何 API，并在他们不知道的情况下代表用户执行操作。

（4）Cookie 工具库

① Js Cookie（JavaScript）

Js Cookie 是一个简单、轻量级的 JavaScript API，用于处理浏览器 cookie。其支持 AMD、CommonJS 和 ES 模块、没有依赖关系、经过彻底测试、支持自定义编码和解码、通用浏览器支持。

复制代码

npm i js-cookie

使用：

// 设置 CookieCookies.set('cookie-name', 'cookie-value', { expires: 14})

// 读取 CookieCookies.get('cookie-name')

// 删除 CookieCookies.remove('cookie-name')

② React Cookie（React）

React Cookie 是一个专门用于 React 的 cookie 库，它继承了 Universal Cookie 库的功能。它提供了一组组件和 Hooks，使 React 中的 cookie 处理非常简单。如果使用的是 React 16.8+ 版本，就可以使用 hooks 来处理 cookie。否则，必须使用其提供的组件。

安装：

npm i react-cookie

React Cookie 提供了 3 个 Hook，分别是 cookie、setCookie 和 removeCookie。可以使用这些 Hook 来处理 React 应用中的 cookie。

const [cookies, setCookie, removeCookie] = useCookies(['cookie-name']);
// 设置 Cookie
setCookie(name, value, [options]);
// 删除 Cookie
removeCookie(name, [options])

③ Cookies（Node.js）

Cookies 是用于 HTTP cookie 配置的流行 NodeJS 模块之一。可以轻松地将其与内置的 NodeJS HTTP 库集成或将其用作 Express 中间件。它允许使用 Keygrip 对 cookie 进行签名以防止篡改、支持延迟 cookie 验证、不允许通过不安全的套接字发送安全 cookie、允许其他库在不知道签名机制的情况下访问 cookie。

安装：

npm install cookies

使用：

const cookie = require('cookie');
cookies = new Cookies( request, response, [ options ] )
// 读取 cookies
cookies.get( name, [ options ] )
// 设置 cookies
cookies.set( name, [ value ], [ options ] )

4. IndexedDB

（1）概述

IndexedDB 提供了一个类似 NoSQL 的 key/value 数据库，它可以存储大量结构化数据，甚至是文件和 blob。每个域至少有 1GB 的可用空间，并且最多可以达到剩余磁盘空间的 60%。

IndexedDB 于 2011 年首次实现，并于 2015 年 1 月成为 W3C 标准，它具有良好的浏览器支持：

4.webp.jpg

key/value 数据库意味着存储的所有数据都必须分配给一个 key。它将key 与 value 相关联，key 用作该值的唯一标识符，这意味着可以使用该 key 跟踪该值。如果应用需要不断获取数据，key/value 数据库使用非常高效且紧凑的索引结构来快速可靠地通过 key 定位值。使用该 key，不仅可以检索存储的值，还可以删除、更新和替换该值。

5.webp.jpg

在说 IndexedDB 之前，先来看一些相关术语：

数据库： 一个域可以创建任意数量的 IndexedDB 数据库，只有同一域内的页面才能访问数据库。
object store：相关数据项的 key/value 存储。它类似于 MongoDB 中的集合或关系数据库中的表。
key：用于引用 object store 中每条记录（值）的唯一名称。它可以使用自动增量数字生成，也可以设置为记录中的任何唯一值。
index：在 object store 中组织数据的另一种方式。搜索查询只能检查 key 或 index。
schema：object store、key 和 index 的定义。
version：分配给 schema 的版本号（整数）。 IndexedDB 提供自动版本控制，因此可以将数据库更新到最新 schema。
操作：数据库活动，例如创建、读取、更新或删除记录。

6.webp.jpg

（2）特点及使用场景

indexedDB 特点如下：

可以将任何 JavaScript 类型的数据存储为键值对，例如对象（blob、文件）或数组等。
IndexedDB API 是异步的，不会在数据加载时停止页面的渲染。
可以存储结构化数据，例如 Date、视频、图像对象等。
支持数据库事务和版本控制。
可以存储大量数据。
可以在大量数据中快速定位/搜索数据。
数据库是域专用的，因此任何其他站点都无法访问其他网站的 IndexedDB 存储，这也称为同源策略。

IndexedDB 使用场景：

存储用户生成的内容： 例如表单，在填写表单的过程中，用户可以离开并稍后再回来完成表单，存储之后就不会丢失初始输入的数据。
存储应用状态： 当用户首次加载网站或应用时，可以使用 IndexedDB 存储这些初始状态。可以是登录身份验证、API 请求或呈现 UI 之前所需的任何其他状态。因此，当用户下次访问该站点时，加载速度会增加，因为应用已经存储了状态，这意味着它可以更快地呈现 UI。
对于离线工作的应用： 用户可以在应用离线时编辑和添加数据。当应用程序来连接时，IndexedDB 将处理并清空同步队列中的这些操作。

（3）IndexedDB 操作

不同浏览器的 IndexedDB 可能使用不同的名称。可以使用以下方法检查 IndexedDB 支持：

const indexedDB =
  window.indexedDB ||
  window.mozIndexedDB ||
  window.webkitIndexedDB ||
  window.msIndexedDB ||
  window.shimIndexedDB;
if (!indexedDB) {
  console.log("不支持 IndexedDB");
}

可以使用 indexedDB.open() 来连接数据库：

javascript

复制代码

const dbOpen = indexedDB.open('performance', 1);

indexedDB.open 的第一个参数是数据库名称，第二个参数是可选的版本整数。

可以使用以下三个事件处理函数监听 indexedDB 的连接状态：

① onerror

在无法建立 IndexedDB 连接时，将触发该事件：

javascript

复制代码

// 连接失败dbOpen.onerror = e => {  reject(`IndexedDB error: ${ e.target.errorCode }`);};

如果在无痕模式、隐私模式下运行浏览器，可能不支持 IndexedDB，需要禁用这些模式。

② onupgradeneeded

一旦数据库连接打开，就会触发 onupgradeneeded 事件，该事件可用于创建 object store。

dbOpen.onupgradeneeded = e => {
   const db = dbOpen.result;
   // 创建 object store
   const store = db.createObjectStore("cars", { keyPath: "id" });
   // 使用自动递增的id
   // const store = db.createObjectStore('cars', { autoIncrement: true }); 
   // 创建索引
   store.createIndex("cars_colour", ["colour"], { 
       unique: true 
   }); 
   // 创建复合索引
   store.createIndex("colour_and_make", ["colour", "make"], {
    unique: false,
  });
};

IndexedDB 使用了 object store 的概念，其本质上是数据集合的名称。可以在单个数据库中创建任意数量的 object store。keyPath是 IndexedDB 将用来识别对象字段名称，通常是一个唯一的编号，也可以通过 autoIncrement: true 来自动为 store 设置唯一递增的 ID。除了普通的索引，还可以创建复合索引，使用多个关键词的组合进行查询。

③ onsuccess

在连接建立并且所有升级都完成时，将触发该事件。上面我们已经新建了 schema，接下来就可以在onsuccess 中添加、查询数据。

// 连接成功
dbOpen.onsuccess = () => {
  this.db = dbOpen.result;
  //1
  const transaction = db.transaction("cars", "readwrite");
  //2
  const store = transaction.objectStore("cars");
  const colourIndex = store.index("cars_colour");
  const makeModelIndex = store.index("colour_and_make");
  //3
  store.put({ id: 1, colour: "Red", make: "Toyota" });
  store.put({ id: 2, colour: "Red", make: "Kia" });
  store.put({ id: 3, colour: "Blue", make: "Honda" });
  store.put({ id: 4, colour: "Silver", make: "Subaru" });
  //4
  const idQuery = store.get(4);
  const colourQuery = colourIndex.getAll(["Red"]);
  const colourMakeQuery = makeModelIndex.get(["Blue", "Honda"]);
  // 5
  idQuery.onsuccess = function () {
    console.log('idQuery', idQuery.result);
  };
  colourQuery.onsuccess = function () {
    console.log('colourQuery', colourQuery.result);
  };
  colourMakeQuery.onsuccess = function () {
    console.log('colourMakeQuery', colourMakeQuery.result);
  };
  // 6
  transaction.oncomplete = function () {
    db.close();
  };
};

这里总共有六部分：

为了对数据库执行操作，我们必须创建一个 schema，一个 schema 可以是单个操作，也可以是多个必须全部成功的操作，否则都不会成功；
这里用来获取 cars object store 的引用以及对应的索引；
object store 上的 put 方法用于将数据添加到数据库中；
这里就是数据的查询，可以使用 keyPath 的值直接查询项目（第14行）；第15行中的 getAll 方法将返回一个包含它找到的每个结果的数组，我们正在根据 cars_colour 索引来搜索 Red，应该会查找到两个结果。第16行根据复合索引查找颜色为Blue，并且品牌为 Honda 的结果。
搜索成功的事件处理函数，它们将在查询完成时触发。
最后，在事务完成时关闭与数据库连接。无需使用 IndexedDB 手动触发事务，它会自行运行。

运行上面的代码，就会得到以下结果：

7.webp.jpg

可以在 Chrome Devtools 中查看：

8.webp.jpg

下面来看看如何更新和删除数据。

更新： 首先使用个 get 来获取需要更新的数据，然后使用 store 上的 put 方法更新现有数据。 put 是一种“插入或更新”方法，它要么覆盖现有数据，要么在新数据不存在时插入新数据。

const subaru = store.get(4);
subaru.onsuccess= function () {
  subaru.result.colour = "Green";
  store.put(subaru.result);
}

这会将数据库中 Silver 色的 Subaru 的颜色更新为绿色。

删除：可以使用 delete API 来删除数据，最简单的方法是通过其 key 来删除：

const deleteCar = store.delete(1);
deleteCar.onsuccess = function () {
  console.log("Removed");
};

如果不知道 key 并且希望根据值来删除，可以这样：

const redCarKey = colourIndex.getKey(["Red"]);
redCarKey.onsuccess = function () {
  const deleteCar = store.delete(redCarKey.result);
  deleteCar.onsuccess = function () {
    console.log("Removed");
  };
};

结果如下：

9.webp.jpg

5. 存储空间分析

可以使用基于 Promise 的 Storage API 检查 Web Storage、IndexedDB 和 Cache API 的剩余空间。异步 .estimate() 方法返回：

quota 属性：可用的空间；
usage 属性：已用的空间。

(async () => {
  if (!navigator.storage) return;
  const storage = await navigator.storage.estimate();
  console.log(`可用大小: ${ storage.quota / 1024 } Kb`);
  console.log(`已用大小: ${ storage.usage / 1024 } Kb`);
  console.log(`已用占比: ${ Math.round((storage.usage / storage.quota) * 100) }%`);
  console.log(`剩余大小: ${ Math.floor((storage.quota - storage.usage) / 1024) } Kb`);
})();

g(`剩余大小: ${ Math.floor((storage.quota - storage.usage) / 1024) } Kb`);})();

Storage API 的浏览器兼容性如下：

00000000000000000000000000000000000000000000.webp.jpg

聊一聊常见的浏览器数据存储方案（下）

（3）Cookie 属性

① Domain

② Path

③ Expires/Max-size

④ Secure

⑤ HTTPOnly

（4）Cookie 工具库

① Js Cookie（JavaScript）

② React Cookie（React）

③ Cookies（Node.js）

4. IndexedDB

（1）概述

（2）特点及使用场景

（3）IndexedDB 操作

① onerror

② onupgradeneeded

③ onsuccess

5. 存储空间分析

热门文章

最新文章

相关课程

相关电子书

相关实验场景