前端的本地储存

1. Cookie

虽然Cookie主要用于在服务器和客户端之间传递信息，但它们也可以被用于在客户端（即浏览器）进行少量的数据存储。不过，由于Cookie的存储限制和每次HTTP请求都会携带它们，因此它们通常不是存储大量数据的最佳选择。

JavaScript中可以使用document.cookie来访问和修改Cookie。但是，由于操作Cookie的API比较原始，你可能需要使用第三方库（如js-cookie）来简化操作。

2. Web Storage（localStorage 和 sessionStorage）

Web Storage提供了两种类型的存储：localStorage和sessionStorage。它们通过简单的JavaScript API来访问和修改存储在浏览器中的数据。

localStorage

• 存储数据：localStorage.setItem('key', 'value');
• 读取数据：var value = localStorage.getItem('key');
• 删除数据：localStorage.removeItem('key');
• 清空所有存储：localStorage.clear();

sessionStorage

sessionStorage的使用方法与localStorage完全相同，只是sessionStorage的数据仅在当前会话（即浏览器标签页）中有效，关闭标签页后数据将被清除。

3. IndexedDB

IndexedDB是一种低级的API，用于在客户端存储大量的结构化数据，包括文件和二进制大对象（blobs）。它提供了一个异步的、基于事务的接口来访问数据。

由于IndexedDB的复杂性，通常建议使用库（如Dexie.js或localForage）来简化操作。但是，如果你选择直接使用IndexedDB，你将需要执行以下步骤：

1. 打开数据库：使用indexedDB.open()方法。
2. 创建对象存储（如果尚不存在）：在upgradeneeded事件中创建。
3. 执行事务：使用transaction()方法开始一个事务，并在事务中执行CRUD（创建、读取、更新、删除）操作。
4. 处理请求：使用请求对象的回调函数（如onsuccess和onerror）来处理结果或错误。

示例：使用localStorage存储和读取数据

javascript复制代码

	// 存储数据
	localStorage.setItem('username', 'JohnDoe');
	// 读取数据
	var username = localStorage.getItem('username');
	console.log(username); // 输出: JohnDoe
	// 删除数据
	localStorage.removeItem('username');
	// 检查数据是否已被删除
	var isDeleted = localStorage.getItem('username') === null;
	console.log(isDeleted); // 输出: true

注意

• 在使用本地存储时，请注意浏览器的存储限制。虽然localStorage和sessionStorage的存储容量通常较大（通常为5MB左右），但不同浏览器和平台之间可能存在差异。
• 对于敏感数据，请考虑使用加密或其他安全措施来保护它们，因为本地存储的数据可以被客户端脚本访问。
• IndexedDB提供了更强大的数据存储功能，但也需要更复杂的操作和管理。如果你只需要简单的键值对存储，那么localStorage或sessionStorage可能是一个更好的选择。