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

html本地存储

admin
行业动态
2025-05-01
2

HTML本地存储通过localStorage和sessionStorage实现浏览器端数据

HTML本地存储

HTML本地存储是指在客户端（浏览器）上存储数据的技术，允许网页在用户设备上保存数据以便后续访问，与传统Cookie相比，本地存储容量更大且操作更灵活，常用于离线应用、用户偏好设置等场景。

html本地存储第1张

本地存储类型与对比

存储类型	作用域	数据持久性	存储容量	数据格式	是否跨域共享
`localStorage`	同源（协议+域名+端口）	永久（手动清除）	约5MB/浏览器	字符串（键值对）	否
`sessionStorage`	同源（页面会话）	会话结束（标签关闭）	约5MB/浏览器	字符串（键值对）	否
`IndexedDB`	同源	永久（手动清除）	约500MB+/数据库	JSON对象或二进制	否
`Cookie`	同源	可设置过期时间	约4KB/浏览器	字符串（键值对）	是（需配置）

localStorage

特性

持久性：数据长期存在，除非手动清除或用户清理缓存。

API方法：

// 存储数据
localStorage.setItem('key', 'value');
// 读取数据
const value = localStorage.getItem('key');
// 删除数据
localStorage.removeItem('key');
// 清空所有数据
localStorage.clear();

适用场景：长期保存用户设置（如主题偏好）、缓存静态资源等。

示例

// 保存用户名
localStorage.setItem('username', 'JohnDoe');
// 读取用户名
console.log(localStorage.getItem('username')); // JohnDoe
// 删除用户名
localStorage.removeItem('username');

sessionStorage

特性

临时性：数据仅在页面会话期间有效（标签页关闭后清除）。
API方法：与localStorage相同，但作用域限于当前页面会话。
适用场景：临时保存表单数据、多步操作状态等。

示例

// 保存临时数据
sessionStorage.setItem('step', '1');
// 刷新页面后仍可读取
console.log(sessionStorage.getItem('step')); // 1
// 关闭标签页后数据消失

IndexedDB

特性

大容量：支持复杂数据结构（如对象、数组）和二进制数据。
异步操作：基于事务和游标，适合存储大量结构化数据。
适用场景：离线应用、数据库替代方案（如ToDo应用）。

示例

// 打开数据库
const db = new IndexedDB('myDatabase', { version: 1 });
db.onsuccess = function(event) {
  const database = event.target.result;
  // 创建对象仓库
  const transaction = database.transaction(['items'], 'readwrite');
  const store = transaction.objectStore('items');
  // 添加数据
  store.add({ id: 1, name: 'Item1' });
};

Cookie（对比补充）

特性

自动发送：每次HTTP请求均携带Cookie。
限制：容量小（约4KB），需设置expires或max-age。
适用场景：用户认证（如Token）、服务器端交互。

示例

// 设置Cookie
document.cookie = 'token=abc123; max-age=3600'; // 1小时有效期
// 读取Cookie
const cookies = document.cookie.split('; ');
console.log(cookies); // [ 'token=abc123' ]

常见问题与解答

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

临时数据（如表单填写）：sessionStorage。
长期配置（如用户偏好）：localStorage。
复杂数据或大容量（如离线应用）：IndexedDB。
需服务器交互（如登录状态）：Cookie。

问题2：如何清理`localStorage`中的过期数据？

手动管理：存储数据时记录过期时间，定期检查并删除。

// 存储带过期时间的数据
localStorage.setItem('data', JSON.stringify({ value: 'test', expiry: Date.now() + 3600000 }));
// 读取时检查是否过期
function getData(key) {
  const data = JSON.parse(localStorage.getItem(key));
  if (data && data.expiry > Date.now()) {
    return data.value;
  } else {
    localStorage.removeItem(key);
    return null;
  }
}