发现宝藏
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【宝藏入口】。
在前端开发中，本地数据存储是实现客户端数据持久化的关键技术。以下是几种常见的前端本地数据存储方式：
1. Cookies
Cookies 是浏览器用来存储数据的小文件，通常用于存储一些小量的数据，尤其是会话信息（如用户认证信息）。它们在客户端存储，可以跨页面访问，并且可以配置过期时间。
特点：
- 存储大小：每个 cookie 大小限制为 4KB。
- 有效期：可以设置过期时间（默认是会话结束后失效）。
- 跨页面共享：同一域名下的页面可以共享 cookies。
- 请求时自动发送：每次发送请求时，浏览器会自动将相关的 cookies 发送到服务器，适用于身份验证等。
示例：
// 设置 cookie
document.cookie = "username=John; expires=Fri, 31 Dec 2024 23:59:59 GMT";// 获取 cookie
let cookies = document.cookie;
console.log(cookies);// 删除 cookie（通过设置过期时间为过去的日期）
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
缺点：
- 数据存储量小（4KB）。
- 数据会随着每次请求一起发送到服务器，增加网络负担。
- 安全性较差，容易受到跨站脚本攻击（XSS）。
2. LocalStorage
localStorage 提供了一种存储在客户端的数据存储方式，数据存储在浏览器中，即使页面关闭，数据依然会保留，直到显式删除。
特点：
- 存储大小：大约 5MB（不同浏览器可能有所不同）。
- 存储方式：数据以键值对的形式存储。
- 生命周期：数据永久存储，直到显式删除或浏览器的存储空间被清除。
- 仅客户端访问：
localStorage只能在客户端访问，不能跨窗口或跨标签页访问。
示例：
// 设置 localStorage
localStorage.setItem('username', 'John');// 获取 localStorage
let username = localStorage.getItem('username');
console.log(username); // "John"// 删除 localStorage
localStorage.removeItem('username');// 清空所有 localStorage 数据
localStorage.clear();
优点：
- 存储容量大（相比 cookies）。
- 数据在浏览器关闭后依然保持有效。
- API 简单，支持同步操作。
缺点：
- 数据仅限于客户端存储，无法跨客户端同步。
- 存储的内容可以被 JavaScript 脚本访问，因此需要小心敏感数据的存储。
- 不支持跨域访问（每个域名下独立存储）。
3. SessionStorage
sessionStorage 是一种基于会话的存储方式，它与 localStorage 类似，但数据在浏览器窗口或标签页关闭时会自动清除。每个浏览器标签页或窗口都有独立的 sessionStorage。
特点：
- 存储大小：与
localStorage类似，通常为 5MB。 - 生命周期：数据在浏览器会话期间有效，浏览器关闭时即丢失。
- 仅限同一会话：不同标签页或窗口中的
sessionStorage不共享。
示例：
// 设置 sessionStorage
sessionStorage.setItem('sessionKey', 'value');// 获取 sessionStorage
let value = sessionStorage.getItem('sessionKey');
console.log(value); // "value"// 删除 sessionStorage
sessionStorage.removeItem('sessionKey');// 清空所有 sessionStorage 数据
sessionStorage.clear();
优点：
- 存储容量大。
- 会话级别的数据存储，关闭浏览器窗口或标签页时会自动清空。
- 简单易用。
缺点：
- 数据存储只在会话期间有效，无法在不同会话中共享。
4. IndexedDB
IndexedDB 是一种低级别的 API，用于存储大量结构化数据。它允许你存储更复杂的数据类型，如文件和二进制数据，并且支持异步操作。
特点：
- 存储容量：没有严格的大小限制，通常可以存储数 MB 或更多的数据。
- 数据类型：可以存储对象、数组、文件等复杂类型。
- 异步操作：支持异步操作，因此不会阻塞主线程。
- 浏览器支持：大多数现代浏览器都支持
IndexedDB。
示例：
// 打开（或创建）数据库
let request = indexedDB.open("MyDatabase", 1);request.onsuccess = function(event) {let db = event.target.result;// 创建一个对象存储let objectStore = db.createObjectStore("users", { keyPath: "id" });// 插入数据objectStore.add({ id: 1, name: "John", age: 30 });// 获取数据let getRequest = objectStore.get(1);getRequest.onsuccess = function() {console.log(getRequest.result); // { id: 1, name: "John", age: 30 }};
};request.onerror = function(event) {console.error("Database error:", event.target.errorCode);
};
优点：
- 支持存储复杂的数据（如对象、数组、二进制数据）。
- 存储量大。
- 支持异步操作，不会阻塞 UI 线程。
- 可以创建索引，以加速数据检索。
缺点：
- API 比较复杂，使用上相对繁琐。
- 数据存储和检索速度可能会受到存储量和索引的影响。
5. Web SQL Database（已废弃）
Web SQL 是一种基于 SQL 的本地数据库 API，它可以在浏览器中存储结构化的数据，使用类似于 SQL 的语法进行操作。这个 API 已被大多数浏览器弃用，推荐使用 IndexedDB。
示例：
let db = openDatabase('MyDatabase', '1.0', 'Test Database', 2 * 1024 * 1024);// 创建表格
db.transaction(function (tx) {tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});// 插入数据
db.transaction(function (tx) {tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
});
特点：
- 基于 SQL，数据存储和查询类似于传统的数据库。
- 数据较为结构化。
缺点：
- 已被弃用，不推荐使用。
- 目前只有部分浏览器支持。
6. File System API (仅限于浏览器扩展或特定环境)
File System API 提供了更接近操作本地文件系统的能力，允许浏览器内的 Web 应用读写本地文件。这个 API 目前仅在特定的浏览器环境或扩展中可用，且并非所有浏览器都支持。
特点：
- 允许更直接的文件操作，如读取、写入和管理文件。
- 安全性较高，需要特定的权限。
缺点：
- 仅限特定环境或扩展，且使用较为复杂。
总结：
| 存储方式 | 存储容量 | 生命周期 | 支持的数据类型 | 特点 |
|---|---|---|---|---|
| Cookies | 4KB | 会话或设置过期时间 | 简单的键值对 | 用于跨请求存储小型数据，常用于身份认证 |
| LocalStorage | 5MB（浏览器差异） | 永久存储 | 键值对（字符串） | 简单易用，数据永久存储 |
| SessionStorage | 5MB（浏览器差异） | 会话期间 | 键值对（字符串） | 会话级别的存储，浏览器关闭时清空 |
| IndexedDB | 较大（数 MB 或更多） | 永久存储 | 对象、数组、二进制数据 | 支持复杂数据类型，异步操作 |
| Web SQL | 较大（不固定） | 永久存储 | 结构化数据（SQL） | 被弃用，不推荐使用 |
| File System API | 受限（特定环境） | 永久存储 | 文件 | 允许直接操作文件，通常用于浏览器扩展 |
根据应用需求选择合适的存储方式，通常情况下 localStorage 和 sessionStorage 比较简单易用，而对于需要存储大量或复杂数据的情况，可以使用 IndexedDB。