js实现数据存储
使用 localStorage 存储数据
localStorage 提供了一种在浏览器中持久化存储键值对的方式，数据不会随页面刷新或关闭而丢失。
// 存储数据
localStorage.setItem('key', 'value');
// 读取数据
const value = localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
// 清空所有数据
localStorage.clear();使用 sessionStorage 存储临时数据
sessionStorage 与 localStorage 类似，但数据仅在当前会话期间有效，关闭浏览器标签页后数据会被清除。
// 存储数据
sessionStorage.setItem('key', 'value');
// 读取数据
const value = sessionStorage.getItem('key');
// 删除数据
sessionStorage.removeItem('key');使用 IndexedDB 存储复杂数据
IndexedDB 是一个低级 API，适合存储大量结构化数据（如对象、数组等）。
// 打开或创建数据库
const request = indexedDB.open('myDatabase', 1);
request.onupgradeneeded = (event) => {
const db = event.target.result;
const store = db.createObjectStore('myStore', { keyPath: 'id' });
};
request.onsuccess = (event) => {
const db = event.target.result;
const transaction = db.transaction('myStore', 'readwrite');
const store = transaction.objectStore('myStore');
// 添加数据
store.add({ id: 1, name: 'John' });
// 读取数据
const getRequest = store.get(1);
getRequest.onsuccess = () => {
console.log(getRequest.result);
};
};使用 Cookies 存储小规模数据
Cookies 适合存储少量数据（如用户偏好设置），但容量有限（约 4KB）。
// 设置 Cookie
document.cookie = 'key=value; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/';
// 读取 Cookie
const cookies = document.cookie.split(';').reduce((acc, cookie) => {
const [key, value] = cookie.trim().split('=');
acc[key] = value;
return acc;
}, {});
// 删除 Cookie
document.cookie = 'key=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';使用 Web SQL（已废弃）
Web SQL 是旧版浏览器支持的 SQL 数据库，但已被 IndexedDB 取代。
const db = openDatabase('myDB', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction((tx) => {
tx.executeSql('CREATE TABLE IF NOT EXISTS logs (id unique, log)');
tx.executeSql('INSERT INTO logs (id, log) VALUES (1, "Hello")');
});使用第三方库（如 PouchDB）
PouchDB 是一个基于 IndexedDB 的封装库，支持离线数据同步。
const db = new PouchDB('myDB');
db.put({ _id: '1', name: 'Alice' })
.then(() => db.get('1'))
.then(doc => console.log(doc));
