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

html本地存储实现

admin
行业动态
2025-05-01
2

HTML本地存储通过 localStorage或 sessionStorage以键值对形式存储数据，使用JavaScript的 setItem()/ getItem()等API操作，支持现代浏览器且数据持久化（除sessionStorage

本地存储实现详解

本地存储

HTML5 提供多种客户端存储机制，允许在浏览器端保存数据，减少服务器请求并提升用户体验,主要包括：

LocalStorage：持久化存储，数据长期存在
SessionStorage：会话级存储，窗口关闭即清除
IndexedDB：结构化数据库，支持复杂数据存储
Cookies：传统存储方式（通常用于会话管理）

LocalStorage 实现

方法	说明
`setItem()`	存储键值对（键和值必须是字符串） `localStorage.setItem('name', 'John')`
`getItem()`	获取指定键的值 `localStorage.getItem('name')`
`removeItem()`	删除指定键值对 `localStorage.removeItem('name')`
`clear()`	清空所有存储数据
`key()`	获取第 N 个键名（从 0 开始索引）
`length`	获取存储数据总量

注意事项：

仅支持字符串存储，需手动序列化/反序列化对象
遵循同源策略（协议+域名+端口需完全一致）
存储容量约 5MB（不同浏览器有差异）

示例代码：

html本地存储实现第1张

// 存储对象数据
const user = { name: 'Alice', age: 25 };
localStorage.setItem('user', JSON.stringify(user));
// 读取并解析
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // 输出: Alice

SessionStorage 特性

特性	LocalStorage	SessionStorage
生命周期	永久存在	窗口/标签页关闭时清除
使用场景	长期配置缓存	临时会话状态保持
共享范围	同源所有窗口共享	仅当前窗口/标签页可见
典型应用	用户偏好设置	表单填写中途离开保护

IndexedDB 操作指南

核心概念：

基于事务的异步操作
使用对象仓库（Object Store）存储数据
支持索引和键范围查询

基本步骤：

打开数据库连接
创建事务对象
执行增删改查操作
处理结果回调

示例代码：

// 打开数据库
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' });
  transaction.oncomplete = () => {
    console.log('数据写入成功');
  };
};

存储方案对比表

特征	LocalStorage	SessionStorage	IndexedDB	Cookies
数据持久性	长期有效	会话结束失效	长期有效	可设置过期时间
存储容量	约5MB	约5MB	无限制（数百MB）	约4KB
数据类型	字符串	字符串	结构化数据	字符串
浏览器支持	IE8+	IE8+	IE10+/FF13+/Chrome	全平台支持
同源共享	是	否	是	是
适用场景	配置信息缓存	临时表单保护	复杂数据管理	会话跟踪