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

html本地存储代码

HTML5本地存储通过 localStorage和 sessionStorage实现数据持久化，前者数据永久保留（除非手动清除），后者仅在页面会话期间有效，两者均以键值对形式存储字符串数据，支持getItem/setItem等API操作，适用于保存用户偏好设置、临时状态等轻量级数据，最大容量约

HTML本地存储简介

HTML本地存储（Local Storage/Session Storage）是浏览器提供的客户端存储机制，允许在用户浏览器中保存键值对数据，与Cookie不同，本地存储容量更大（通常5~10MB）,且不会随请求自动发送到服务器。

存储类型对比

特性 localStorage sessionStorage cookies
生命周期 永久（手动清除） 会话级（标签页关闭时清除） 可设置过期时间或会话级
存储容量 约5MB 约5MB 约4KB
数据可见性 同源页面共享 同源页面共享 全站共享
数据格式 字符串（需序列化） 字符串（需序列化） 字符串（需序列化）
浏览器支持 IE8+ IE8+ 所有浏览器

操作方法示例

localStorage基本操作

// 存储数据
localStorage.setItem('username', 'JohnDoe');
localStorage.setItem('age', 25);
// 读取数据
const name = localStorage.getItem('username'); // JohnDoe
const userAge = localStorage.getItem('age');   // 25
// 删除单个数据
localStorage.removeItem('age');
// 清空所有数据
localStorage.clear();

存储复杂数据结构

// 存储对象（需JSON序列化）
const user = { name: 'Alice', role: 'admin' };
localStorage.setItem('user', JSON.stringify(user));
// 读取并解析对象
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // Alice

设置过期时间（模拟）

// 存储带过期时间的数据
function setItemWithExpiry(key, value, ttl) {
  const now = Date.now();
  const item = {
    value: value,
    expiry: now + ttl1000
  };
  localStorage.setItem(key, JSON.stringify(item));
}
// 读取时检查过期
function getItemWithExpiry(key) {
  const itemStr = localStorage.getItem(key);
  if (!itemStr) return null;
  const item = JSON.parse(itemStr);
  if (Date.now() > item.expiry) {
    localStorage.removeItem(key);
    return null;
  }
  return item.value;
}
// 使用示例
setItemWithExpiry('token', 'abc123', 60); // 60秒后过期
console.log(getItemWithExpiry('token')); // 立即读取有效
setTimeout(()=>console.log(getItemWithExpiry('token')), 61000); // 61秒后返回null

indexedDB与本地存储对比

维度 localStorage/sessionStorage indexedDB
数据结构 键值对（字符串） 结构化数据库（支持索引/事务）
存储容量 约5MB 约500MB（浏览器限制）
适用场景 简单键值存储 复杂数据管理（如离线应用）
API复杂度 简单接口 类SQLite的异步API

常见问题与解答

问题1：localStorage和sessionStorage的核心区别是什么？

解答：

  • localStorage数据持久存在，除非手动清除或用户清理浏览器数据
  • sessionStorage数据仅在当前标签页会话期间有效，关闭标签页即清除
  • 典型场景：购物车信息用localStorage，临时表单状态用sessionStorage

问题2：如何判断浏览器是否支持本地存储？

解答：
可以通过检测window对象是否包含相关属性来判断：

if (typeof window.localStorage !== 'undefined') {
  console.log('支持localStorage');
} else {
  console.log('不支持localStorage');
}

注意：现代浏览器（IE8+）均已支持，但旧版浏览器（如IE7）需要降级

本地存储
0

相关文章