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

html5的本地存储

HTML5本地存储含localStorage（持久）与sessionStorage（会话级），均以键值对存数据，支持离线缓存，优化网页

HTML5本地存储详解

本地存储的类型

HTML5提供两种本地存储机制：localStorage和sessionStorage，均用于在客户端保存数据。

  • localStorage：数据持久化，即使关闭浏览器或重启计算机，数据仍然存在，除非手动清除。
  • sessionStorage：数据仅在当前页面会话（标签页）中有效，关闭页面或标签页后数据被销毁。

核心特性对比表

特性 localStorage sessionStorage
数据持久性 长期存储（直到手动清除） 短期存储（页面关闭即失效）
作用范围 同源的所有窗口/标签页共享 仅当前标签页有效
存储容量 约5MB（浏览器依赖） 约5MB（浏览器依赖）
数据类型 仅支持字符串（需手动序列化对象） 仅支持字符串（需手动序列化对象）
API方法 setItem、getItem、removeItem 同上

使用方法

1 基本操作

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

2 存储对象或数组

由于值必须是字符串，需通过JSON序列化： 

// 存储对象
const user = { name: 'Alice', age: 25 };
localStorage.setItem('user', JSON.stringify(user));
// 读取并解析
const userObj = JSON.parse(localStorage.getItem('user'));

3 遍历所有键值对

localStorage.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

注意事项

  • 数据类型限制：仅支持字符串，需手动处理对象/数组的序列化与反序列化。
  • 同源限制：不同域名或协议的页面无法共享数据（如http和https视为不同源）。
  • 隐私模式：部分浏览器在隐私模式下禁用本地存储。
  • 安全风险：数据可被同源脚本读取，避免存储敏感信息（如密码）。

常见问题与解答

问题1：localStorage的存储容量有多大？
答：大多数浏览器限制为约5MB，具体取决于浏览器实现，可通过localStorage.length查看当前存储的键值对数量。

问题2：如何判断浏览器是否支持localStorage？
答： 

if (typeof Storage !== 'undefined') {
  // 支持localStorage和sessionStorage
} else {
  console.error('浏览器不支持本地存储
html5本地存储
0

相关文章