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

html暂存数据

admin
行业动态
2025-04-30
2636

HTML暂存数据可通过SessionStorage（会话级存储，页面关闭清除）或LocalStorage（持久存储）实现，两者均属Web Storage API，用于客户端临时保存键值对数据，提升交互体验并减少服务器

Cookie

用途：常用于存储少量配置信息（如用户偏好、登录状态）
特点：
- 自动发送给服务器（每次HTTP请求）
- 可设置过期时间（长期存储）或会话级（关闭浏览器失效）
- 大小限制：约4KB

示例代码：

// 设置Cookie
document.cookie = "username=John; expires=Fri, 31 Dec 2024 12:00:00 UTC; path=/";
// 读取Cookie
const getCookie = (name) => {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  return parts.length === 2 ? parts[1].split(';')[0] : null;
};

LocalStorage

用途：持久化存储大量数据（如用户设置、缓存）
特点：
- 数据长期存在,除非手动清除
- 仅同源页面可访问
- 大小限制：约5MB

示例代码：

// 存储数据
localStorage.setItem('theme', 'dark');
// 读取数据
const theme = localStorage.getItem('theme');
// 删除数据
localStorage.removeItem('theme');

SessionStorage

用途：临时存储会话级数据（如表单临时数据）
特点：
- 数据在页面关闭/标签页关闭后失效
- 仅当前页面/标签页可访问
- 大小限制：约5MB

示例代码：

// 存储数据
sessionStorage.setItem('tempData', JSON.stringify({a:1,b:2}));
// 读取数据
const tempData = JSON.parse(sessionStorage.getItem('tempData'));

IndexedDB

用途：存储结构化大量数据（如离线应用数据）
特点：
- 异步API,支持事务操作
- 大小限制：通常数百MB至数GB（取决于浏览器）
- 需手动管理数据库和键范围

示例代码：

// 打开数据库
const dbPromise = idb.openDB('my-database', 1, {
  upgrade(db) { db.createObjectStore('keys', {keyPath: 'id'}); }
});
// 存储数据
dbPromise.then(db => {
  const tx = db.transaction('keys', 'readwrite');
  tx.store.put({id:1, name:'Alice'});
  tx.done();
});

Form表单暂存

用途：临时保存用户输入（如自动填充、重置前缓存）
特点：
- 依赖浏览器原生功能（如autocomplete属性）
- 数据仅在页面刷新/跳转时保留

示例代码：

<input type="text" name="email" autocomplete="on" />

存储方式对比表

特性	Cookie	LocalStorage	SessionStorage	IndexedDB	Form暂存
生命周期	可设置过期时间	永久（手动清除）	标签页关闭失效	永久（手动清除）	页面刷新保留
大小限制	4KB	5MB	5MB	数百MB~数GB	无固定限制
作用域	同源所有页面	同源所有页面	当前页面/标签页	同源所有页面	当前表单
数据类型	字符串（需编码）	字符串/对象	字符串/对象	结构化数据	用户输入值
网络传输	每次请求自动发送	不传输	不传输	不传输	不传输