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

html本地存储方法

admin
行业动态
2025-05-01
2

HTML本地存储方法包括localStorage（持久化）、sessionStorage（会话级）、cookie（带过期时间）及IndexedDB（结构化大数据存储），均通过键值对

HTML本地存储方法详解

Cookie

特点：
- 自动随HTTP请求发送到服务器
- 容量小（约4KB）
- 可设置过期时间（expires）或存活周期（max-age）
- 支持设置path（路径）和domain（域）
API：
- document.cookie：读取/写入Cookie
- document.cookie = "key=value; expires=Date; path=/; domain=example.com"

示例：

// 设置Cookie
document.cookie = "username=John; expires=" + new Date(2023, 11, 31).toUTCString();
// 读取Cookie
function getCookie(name) {
  const cookies = document.cookie.split('; ');
  for (let cookie of cookies) {
    const [key, value] = cookie.split('=');
    if (key === name) return value;
  }
  return null;
}
// 删除Cookie
document.cookie = "username=; expires=" + new Date(0).toUTCString();

LocalStorage

特点：
- 持久化存储，无过期时间
- 容量较大（约5MB）
- 仅在客户端生效，不随HTTP请求发送
API：
- localStorage.setItem(key, value)
- localStorage.getItem(key)
- localStorage.removeItem(key)
- localStorage.clear()

示例：

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

SessionStorage

特点：
- 会话级存储，页面关闭后清除
- 容量与LocalStorage相同（约5MB）
- 仅在客户端生效，不随HTTP请求发送
API：
- sessionStorage.setItem(key, value)
- sessionStorage.getItem(key)
- sessionStorage.removeItem(key)
- sessionStorage.clear()

示例：

// 临时存储表单数据
sessionStorage.setItem("formData", JSON.stringify({ name: "Alice" }));

IndexedDB

特点：
- 结构化数据库，支持事务和索引
- 容量大（可存储GB级数据）
- 异步操作，适合复杂数据存储
API：
- indexedDB.open("databaseName")
- transaction.objectStore("storeName").add(data)

示例：

// 打开数据库
const db = indexedDB.open("myDB", 1);
db.onupgradeneeded = (event) => {
  const db = event.target.result;
  db.createObjectStore("users", { keyPath: "id" });
};
db.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction("users", "readwrite");
  const store = transaction.objectStore("users");
  store.add({ id: 1, name: "Bob" });
};

本地存储方法对比表

特性	Cookie	LocalStorage	SessionStorage	IndexedDB
容量	4KB	5MB	5MB	GB级
持久化	可设置过期时间	是	否（会话结束）	是
传输范围	随HTTP请求发送	不发送	不发送	不发送
数据类型	字符串	字符串	字符串	结构化数据
API复杂度	手动解析	简单键值对	简单键值对	复杂（类SQL）
适用场景	会话跟踪、登录状态	长期配置、偏好设置	临时会话数据	复杂应用数据存储