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

html数据存储

admin
行业动态
2025-04-29
4380

HTML数据存储包括cookie（带过期时间）、localStorage（持久化）、sessionStorage（会话级）及IndexedDB（结构化大数据），分别用于不同场景的

HTML数据存储详解

Cookie

特点：自动发送到服务器，容量小（约4KB）,可设置过期时间。
用途：用户登录状态、个性化设置。

示例：

// 设置Cookie
document.cookie = "username=John; max-age=3600; path=/";
// 读取Cookie
const cookies = document.cookie.split('; ').map(row => {
  const [key, value] = row.split('=');
  return { [key]: value };
});

LocalStorage

特点：持久化存储（除非手动清除），容量约5MB,仅支持字符串。
用途：长期保存用户偏好、应用配置。

示例：

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

SessionStorage

特点：会话级存储，页面关闭后清除,容量约5MB。
用途：临时数据（如表单填写中途离开）。

示例：

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

IndexedDB

特点：异步API，支持复杂数据结构，容量大（约500MB）。
用途：离线应用、大量数据存储（如聊天记录）。

示例：

// 打开数据库
const db = new Dexie('myDatabase');
db.version(1).stores({ friends: '++id,name' });
// 添加数据
db.friends.put({ name: 'Alice' });

File API（文件系统）

特点：支持文件读写，需用户授权,适合二进制数据。
用途：离线文件编辑、大文件存储。

示例：

// 请求文件系统
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
requestFileSystem(window.TEMPORARY, 100  1024  1024).then(fs => {
  fs.root.getFile('example.txt', { create: true }, fileEntry => {
    // 写入文件
    fileEntry.createWriter().onwriteend = () => console.log('Write complete');
  });
});

数据存储对比表

特性	Cookie	LocalStorage	SessionStorage	IndexedDB	File API
容量	4KB	5MB	5MB	500MB+	无限制
持久性	可设置过期时间	永久（手动清除）	会话结束清除	永久（手动清除）	永久（手动删除）
API复杂度	简单（字符串操作）	简单（键值对）	简单（键值对）	复杂（异步操作）	复杂（文件流）
适用场景	轻量级状态管理	用户偏好设置	临时表单数据	复杂数据存储	大文件处理

相关问题与解答

问题1：如何选择LocalStorage和IndexedDB？

解答：

若数据结构简单（如键值对）、容量小（<5MB），优先用LocalStorage（如用户主题设置）。
若需要存储大量数据、复杂结构（如对象或数组），或需要索引查询，则用IndexedDB（如离线文档库）。

问题2：如何清理过期的LocalStorage数据？

解答：
LocalStorage本身不支持自动过期，需手动管理，可通过以下方式实现：

添加时间戳：存储数据时记录时间，读取时检查是否超时。

const saveData = (key, value, ttl) => {
  const data = { value, expire: Date.now() + ttl };
  localStorage.setItem(key, JSON.stringify(data));
};
const getData = key => {
  const { value, expire } = JSON.parse(localStorage.getItem(key));
  return Date.now() > expire ? null : value;
};