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

html5本地缓存存储数据库

HTML5本地缓存存储包括localStorage（持久化）、sessionStorage（会话级）及IndexedDB（结构化数据），用于离线应用与数据持久化，提升用户体验

HTML5本地缓存存储数据库详解

本地存储类型

存储类型 特点
localStorage 持久化存储，数据无过期时间，需手动清除，容量约5MB（不同浏览器有差异）
sessionStorage 会话级存储，页面关闭后数据消失，容量约5MB
IndexedDB 结构化数据库，支持复杂数据类型，容量大（可达数百MB），支持事务操作
WebSQL 关系型数据库（已废弃），部分浏览器支持，建议使用IndexedDB替代
Cookie 小型持久化存储，每次请求都会发送到服务器，容量约4KB

localStorage 核心用法

基本操作

// 存储数据（只能存字符串）
localStorage.setItem('key', 'value');
// 获取数据
const value = localStorage.getItem('key');
// 删除单个键值
localStorage.removeItem('key');
// 清空所有数据
localStorage.clear();

存储对象/数组
需通过JSON.stringify和JSON.parse转换： 

// 存储对象
const user = { name: 'Alice', age: 25 };
localStorage.setItem('user', JSON.stringify(user));
// 读取对象
const userObj = JSON.parse(localStorage.getItem('user'));

兼容性

html5本地缓存存储数据库 第1张

  • 所有现代浏览器均支持
  • 通过typeof localStorage检测是否可用

IndexedDB 核心用法

基础概念

  • 异步API,基于事件驱动
  • 支持Object Store（类似数据库表）
  • 支持索引（KeyPath/KeyRange）

操作步骤

// 1. 打开数据库
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;
  // 2. 添加数据
  const transaction = db.transaction(['users'], 'readwrite');
  const store = transaction.objectStore('users');
  store.add({ id: 1, name: 'Bob' });
  // 3. 读取数据
  transaction.oncomplete = () => {
    const getRequest = store.get(1);
    getRequest.onsuccess = () => {
      console.log(getRequest.result); // { id: 1, name: 'Bob' }
    };
  };
};

关键特性

  • 支持事务（readonly或readwrite）
  • 可定义主键和索引
  • 适合存储大量结构化数据（如离线应用）

localStorage vs IndexedDB 对比

维度 localStorage IndexedDB
数据类型 仅字符串（需手动序列化） 支持对象、数组等复杂结构
存储容量 约5MB 可达数百MB（依赖浏览器）
API复杂度 简单（同步操作） 复杂（异步操作，需处理事件）
适用场景 轻量级配置、会话状态 离线应用、大数据量存储
浏览器支持 IE8+及以上 IE10+及以上

常见问题与解答

问题1：如何选择合适的本地存储方案？

  • 简单键值对（如用户偏好设置）：localStorage
  • 复杂数据或大数据量（如离线应用数据库）：IndexedDB
  • 短期会话数据（如表单临时保存）：sessionStorage

问题2：localStorage数据如何实现“过期”？
localStorage本身不支持过期时间，需手动实现： 

// 存储时添加时间戳
localStorage.setItem('token', JSON.stringify({ value: 'abc', exp: Date.now() + 60000 }));
// 读取时检查是否过期
const token = JSON.parse(localStorage.getItem('token'));
if (token && token.exp > Date.now()) {
  // 有效
} else {
  // 过期，清除数据
  localStorage.removeItem('token');
HTML
0

相关文章