当前位置：首页 > 行业动态 > 正文

HTML5本地数据库

admin
行业动态
2025-05-08
2245

HTML5本地数据库包括IndexedDB（事务型数据库，支持复杂数据存储）和localStorage（键值对存储），均用于浏览器端数据持久化，提升离线

HTML5本地数据库详解

什么是HTML5本地数据库？

HTML5提供了多种在客户端存储数据的机制，允许网页应用在用户浏览器中保存数据，减少网络请求并提升用户体验,主要包含以下三种存储方式：

localStorage（本地存储）
sessionStorage（会话存储）
IndexedDB（索引数据库）

存储类型对比

特性	localStorage	sessionStorage	IndexedDB
生命周期	永久（直到手动清除）	会话结束（标签页关闭）	永久（需手动删除）
存储容量	约5MB（浏览器限制）	约5MB	约500MB+（浏览器限制）
数据类型	字符串（需序列化）	字符串	结构化数据（对象、数组）
浏览器支持	IE8+、现代浏览器	IE8+、现代浏览器	IE10+、现代浏览器
适用场景	简单键值对存储	临时会话数据	复杂数据存储（如SQL）

操作方法与示例

localStorage

// 存储数据（需转为JSON字符串）
localStorage.setItem('user', JSON.stringify({name: 'Alice', age: 25}));
// 读取数据（需解析JSON）
const user = JSON.parse(localStorage.getItem('user'));
console.log(user.name); // 输出：Alice
// 删除数据
localStorage.removeItem('user');
// 清空所有数据
localStorage.clear();

sessionStorage

// 存储会话数据
sessionStorage.setItem('token', 'abc123');
// 读取数据
console.log(sessionStorage.getItem('token')); // 输出：abc123
// 会话结束时自动清除（无需手动操作）

IndexedDB

// 打开数据库
const request = indexedDB.open('myDatabase', 1);
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.get(1).onsuccess = (e) => console.log(e.target.result);
};
request.onerror = (event) => console.error(event.target.error);

注意事项

数据格式：
- localStorage和sessionStorage仅支持字符串，需手动序列化（JSON.stringify）和反序列化（JSON.parse）。
- IndexedDB支持直接存储对象、数组等复杂数据结构。
浏览器兼容性：
- IndexedDB在旧版IE（如IE9-10）中不支持,需使用Polyfill或替代方案。
存储空间限制：
- 单个域名下的localStorage和sessionStorage通常限制为5MB左右，IndexedDB则更大（约500MB+）。
隐私与安全：
本地存储数据可被用户通过浏览器开发者工具查看,敏感信息需加密处理。