html5中数据存储的例子

HTML5 数据存储类型与示例

LocalStorage（本地存储）

• 特点：数据持久化存储，关闭浏览器后仍保留,所有页面共享同一存储空间。
• API 方法：setItem()、getItem()、removeItem()、clear()
• 示例：保存用户偏好设置

  // 存储数据
  localStorage.setItem('theme', 'dark');
  localStorage.setItem('fontSize', '16px');

// 读取数据
const theme = localStorage.getItem(‘theme’); // 返回 ‘dark’
const fontSize = localStorage.getItem(‘fontSize’); // 返回 ’16px’

// 删除单条数据
localStorage.removeItem(‘theme’);

// 清空所有数据
localStorage.clear();

适用场景：长期保存用户配置（如主题、语言）、跨页面传递数据。
---
# 2. SessionStorage（会话存储）
特点：数据仅在当前浏览器标签页会话中存活，标签页关闭后清除，不同页面隔离。
API 方法：与 `localStorage` 相同。
示例：临时保存表单输入  
```javascript
// 存储数据
sessionStorage.setItem('formData', JSON.stringify({ name: 'Alice', age: 25 }));
// 读取数据
const formData = JSON.parse(sessionStorage.getItem('formData'));
console.log(formData.name); // 输出 'Alice'
// 删除数据（关闭标签页自动清除）
sessionStorage.removeItem('formData');

• 适用场景：临时缓存页面状态、未提交的表单数据。

IndexedDB（索引数据库）

• 特点：基于事务的异步数据库，支持存储大量结构化数据，类似 NoSQL 数据库。
• API 方法：open()、transaction()、add()、put()、get()、delete()
• 示例：创建并操作数据库 %ignore_pre_3%

request.onupgradeneeded = (event) => {
const db = event.target.result;
db.createObjectStore(‘users’, { keyPath: ‘id’ }); // 创建对象仓库
};

request.onsuccess = (event) => {
const db = event.target.result;
const transaction = db.transaction(‘users’, ‘readwrite’);
const store = transaction.objectStore(‘users’);

// 添加数据
store.add({ id: 1, name: ‘Bob’ });
store.add({ id: 2, name: ‘Carol’ });

// 读取数据
store.get(1).onsuccess = (event) => {
console.log(event.target.result); // 输出 { id: 1, name: ‘Bob’ }
};

// 删除数据
store.delete(2);
};

request.onerror = (event) => {
console.error(‘IndexedDB 错误:’, event.target.error);
};

适用场景：复杂数据存储（如文件、大量记录）、离线应用。
---
# 4. Web SQL Database（已废弃）
说明：早期 HTML5 规范中的数据库，但已被弃用，不推荐使用。
替代方案：使用 `IndexedDB`。
---
 数据存储对比表
| 特性                | LocalStorage          | SessionStorage        | IndexedDB              |
|---------------------|-----------------------|-----------------------|------------------------|
| 数据生命周期    | 永久（手动清除）      | 会话结束（标签页关闭）| 手动删除或浏览器清理   |
| 存储容量        | 约 5MB                | 约 5MB                | 无限制（取决于浏览器） |
| 数据类型        | 字符串（需序列化）   | 字符串（需序列化）    | 结构化数据（对象/数组）|
| 作用域          | 同源所有页面共享      | 当前标签页            | 同源所有页面共享       |
| API 风格        | 同步                  | 同步                  | 异步                   |
---
 相关问题与解答
# 问题 1：如何选择 `LocalStorage`、`SessionStorage` 和 `IndexedDB`？
解答：  
若需长期保存简单数据（如用户偏好、配置），优先使用 `LocalStorage`。  
若需临时存储数据（如未提交的表单、会话状态），使用 `SessionStorage`。  
若需存储复杂或大量数据（如文件、关系型数据），选择 `IndexedDB`。
---
# 问题 2：`LocalStorage` 如何实现数据过期？
解答：  
`LocalStorage` 本身不支持数据过期时间，但可通过以下方式模拟：  
1. 存储时间戳：保存数据时记录存入时间，读取时检查是否超时。  
   ```javascript
   const now = Date.now();
   localStorage.setItem('token', JSON.stringify({ value: 'abc123', expire: now + 3600000 })); // 1小时后过期

2. 封装工具函数：

   function setItemWithExpire(key, value, ttl) {
     const now = Date.now();
     localStorage.setItem(key, JSON.stringify({ value, expire: now + ttl }));
   }
   function getItemIfNotExpired(key) {
     const data = JSON.parse(localStorage.getItem(key));
     if (data && Date.now() < data.expire) {
       return data.value;
     } else {
       localStorage.removeItem(key);
       return null;
     }
   }