总结JavaScript三种数据存储方式之间的区别

当我们开发基于 JavaScript 的应用程序时，我们需要考虑如何在应用程序中存储数据。JavaScript 中有很多种数据存储方式，本文将介绍三种最常用的数据存储方式，包括：

1. Cookie
2. Web 存储（LocalStorage 和 SessionStorage）
3. IndexedDB

Cookie

Cookie 是最早的 Web 储存技术之一，可以通过 document.cookie 对象在 Web 应用程序中存储小量的数据。Cookie 的一个主要限制是它只允许存储最多 4KB 的数据。另外，Cookie 在请求的时候会自动发送给服务器，所以需要注意存储敏感信息的时候需要加密。

下面是一个使用 Cookie 存储数据的示例：

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";

这将创建一个名为 "username" 的 Cookie，它的值为 "John Doe"，并在 2022 年 12 月 18 日 12:00:00 UTC 过期。它的路径设置为默认根目录 "/"

Web 存储

Web 存储是一种更先进的存储技术，包括 LocalStorage 和 SessionStorage。这两种存储方式都是针对单个站点的。

LocalStorage 存储的数据没有时间限制，会一直存储在用户的计算机上，除非用户手动清除或者使用 JavaScript 代码删除。LocalStorage 可以存储比 Cookie 更大的数据（通常是 5MB），但它不允许在存储过程中加密敏感数据。

下面是一个使用 LocalStorage 存储数据的示例：

localStorage.setItem("username", "John Doe");

这将创建一个名为 "username" 的 LocalStorage，它的值为 "John Doe"。

SessionStorage 的作用与 LocalStorage 相似，但是它是会话级别的存储，意味着一旦会话结束，存储的数据就不存在了。SessionStorage 也有一个大小限制（通常是 5MB），与 LocalStorage 相同。同样也不允许在存储过程中加密敏感数据。

下面是一个使用 SessionStorage 存储数据的示例：

sessionStorage.setItem("username", "John Doe");

这将创建一个名为 "username" 的 SessionStorage，它的值为 "John Doe"。

IndexedDB

IndexedDB 是一种基于事务的事务存储方式，可以存储大量结构化数据，如对象和数组，而不只是文本。它也可以在存储过程中加密数据。使用 IndexedDB 的 API，需要更多的代码开发和时间。IndexedDB 在数据存储层级中占据了更高的位置。

下面是一个使用 IndexedDB 存储数据的示例：

// 创建数据库
var request = indexedDB.open("myDatabase", 1);
request.onupgradeneeded = function(event) {
  var db = event.target.result;
  var objectStore = db.createObjectStore("users", { keyPath: "id" });
  objectStore.createIndex("name", "name", { unique: false });
  objectStore.createIndex("email", "email", { unique: true });
}

// 插入新数据
var user = { id: 1, name: "John Doe", email: "[e-mail]" };
var request = db.transaction(["users"], "readwrite")
  .objectStore("users")
  .add(user);
request.onsuccess = function(event) {
  console.log("数据添加成功");
};

// 查询所有数据
var transaction = db.transaction(["users"]);
var objectStore = transaction.objectStore("users");
var request = objectStore.getAll();
request.onsuccess = function(event) {
  console.log(request.result);
};

这将创建一个名为 "myDatabase" 的 IndexedDB 数据库，它有一个名为 "users" 的对象仓库，每个对象都有一个 "id" 属性，另外还有 "name" 和 "email" 两个属性。示例中插入了一个新用户，同时查询了所有的用户数据。

根据不同的需求场景，我们可以选择不同的存储方式来满足自己的需求。Cookie 适用于存储小量数据，而 Web 存储适用于需要存储更大量结构化数据并且不需要加密的情况。IndexedDB 适用于需要安全存储大量结构化数据并允许在存储过程中加密的情况。