存储 JavaScript

JavaScript 是一种常见的编程语言，经常用于 Web 开发中。在 Web 应用程序中，需要存储数据以便以后使用。本文将介绍 JavaScript 中的各种存储选项。

Cookies

Cookies 是一种存储在用户计算机上的小文件，包含有关用户访问网站的信息。可以使用 JavaScript 访问和修改 Cookies。

读取 Cookies

可以使用 document.cookie 属性读取 Cookies。该属性返回一个字符串，其中包含所有可用 Cookies。

const cookies = document.cookie;
console.log(cookies);

写入 Cookies

要写入 Cookies，可以设置 document.cookie 属性。以下示例创建一个名为 username 的 Cookie：

document.cookie = "username=John Doe";

设置过期时间

可以将 expires 属性设置为一个时间字符串，以设置 Cookie 的过期时间。以下示例创建一个在 30 天后过期的 Cookie：

const date = new Date();
date.setTime(date.getTime() + 30 * 24 * 60 * 60 * 1000);
const expires = "expires=" + date.toUTCString();
document.cookie = "username=John Doe;" + expires;

Web 存储

Web 存储提供两种存储选项：localStorage 和 sessionStorage。这两种选项都提供了一个键/值存储，可以在浏览器中持久存储数据。

localStorage

localStorage 用于在浏览器上持久存储数据。该数据不会过期，除非用户手动清除它。

读取 localStorage

可以使用 localStorage.getItem(key) 方法读取 localStorage 中给定 key 的值。以下示例读取名为 username 的 localStorage：

const username = localStorage.getItem("username");
console.log(username);

写入 localStorage

要将数据存储在 localStorage 中，可以使用 localStorage.setItem(key, value) 方法。以下示例将名为 username 的 localStorage 设置为 John Doe：

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

删除 localStorage

可以使用 localStorage.removeItem(key) 来删除 localStorage 中的项。以下示例删除名为 username 的 localStorage：

localStorage.removeItem("username");

sessionSorage

sessionStorage 用于在浏览器上存储对话期间的数据。当用户关闭浏览器时，存储的数据将被删除。

读取 sessionStorage

可以使用 sessionStorage.getItem(key) 方法读取指定键的 sessionStorage。以下示例读取名为 username 的 sessionStorage：

const username = sessionStorage.getItem("username");
console.log(username);

写入 sessionStorage

要将数据存储在 sessionStorage 中，可以使用 sessionStorage.setItem(key, value) 方法。以下示例将名为 username 的 sessionStorage 设置为 John Doe：

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

删除 sessionStorage

可以使用 sessionStorage.removeItem(key) 来删除 sessionStorage 中的项。以下示例删除名为 username 的 sessionStorage：

sessionStorage.removeItem("username");

IndexedDB

IndexedDB 是在浏览器中存储结构化数据的对象数据库。以下示例创建一个名为 mydb 的数据库：

const request = window.indexedDB.open("mydb", 1);
request.onerror = (event) => {
  console.log("Error: " + event.target.errorCode);
};
request.onsuccess = (event) => {
  const db = event.target.result;
  console.log("Success: " + db);
};

创建完毕后，可以创建对象存储空间并将数据存储在其中。

创建对象存储空间

可以使用 createObjectStore(name, options) 方法创建对象存储空间。以下示例创建名为 customers 的对象存储空间：

const objectStore = db.createObjectStore("customers", { keyPath: "id" });

添加数据

可以使用 add(data) 方法将数据添加到对象存储空间。以下示例将一个名为 John Doe 的客户添加到 customers 中：

const customer = { id: 1, name: "John Doe" };
const request = objectStore.add(customer);
request.onerror = (event) => {
  console.log("Error: " + event.target.errorCode);
};
request.onsuccess = (event) => {
  console.log("Success");
};

读取数据

可以使用 get(key) 方法从对象存储空间中读取数据。以下示例读取 customers 中 id 为 1 的客户：

const request = objectStore.get(1);
request.onerror = (event) => {
  console.log("Error: " + event.target.errorCode);
};
request.onsuccess = (event) => {
  const customer = event.target.result;
  console.log("Success: " + customer.name);
};

删除数据

可以使用 delete(key) 方法从对象存储空间中删除数据。以下示例删除 customers 中 id 为 1 的客户：

const request = objectStore.delete(1);
request.onerror = (event) => {
  console.log("Error: " + event.target.errorCode);
};
request.onsuccess = (event) => {
  console.log("Success");
};

总结

本文介绍了 JavaScript 中的几种存储选项，包括 Cookies、Web 存储和 IndexedDB。每个选项都提供了自己的优缺点，并且可以根据具体需求进行选择。