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

html离线存储

admin
行业动态
2025-04-28
3

HTML离线存储含本地存储（持久）和会话存储（临时），均以键值对存数据，另有Index

HTML离线存储详解

定义与用途

HTML5 引入了离线存储机制，允许网页在客户端（浏览器）本地保存数据，实现数据的持久化或会话级存储，主要解决传统 Cookie 容量小（约4KB）的问题，支持更大容量（通常5MB左右）的数据存储，适用于保存用户偏好、表单数据、缓存内容等。

两种核心存储方式

`localStorage`

生命周期：数据持久化,除非手动清除或用户清理浏览器缓存。
作用域：同源（协议+域名+端口）下的所有页面共享。
API 方法：
- localStorage.setItem(key, value)：存储键值对。
- localStorage.getItem(key)：获取值。
- localStorage.removeItem(key)：删除指定键。
- localStorage.clear()：清空所有数据。

示例：

// 保存用户名
localStorage.setItem('username', 'JohnDoe');
// 读取用户名
const name = localStorage.getItem('username');
console.log(name); // JohnDoe

`sessionStorage`

生命周期：仅在当前页面会话期间有效,标签页关闭后数据消失。
作用域：仅当前页面（或标签页）可见,其他页面无法访问。
API 方法：与 localStorage 完全相同。

示例：

// 临时保存购物车数量
sessionStorage.setItem('cartCount', 3);
// 刷新页面后仍可读取
const count = sessionStorage.getItem('cartCount');
console.log(count); // 3

关键区别对比表

特性	`localStorage`	`sessionStorage`
生命周期	永久（直到手动清除）	会话级（标签页关闭即失效）
作用域	同源所有页面共享	仅当前页面/标签页可见
典型用途	长期配置（如用户偏好）	临时数据（如表单缓存）
数据持久性	是	否

实际应用示例

保存用户设置

// 检查是否有保存的主题设置
const theme = localStorage.getItem('theme') || 'light';
applyTheme(theme); // 假设存在应用主题的函数
// 用户切换主题时保存
localStorage.setItem('theme', 'dark');

购物车数据临时存储

html离线存储第1张

// 添加商品到临时购物车
const cart = JSON.parse(sessionStorage.getItem('cart')) || [];
cart.push({ id: 1, name: 'Book', quantity: 2 });
sessionStorage.setItem('cart', JSON.stringify(cart));

注意事项

数据类型限制：
所有值均以字符串形式存储，需手动序列化/反序列化对象（如 JSON.stringify）。

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

安全风险：
- 数据易受 XSS（跨站脚本）攻击，不可存储敏感信息（如密码、Token）。
- 同一域名下的反面脚本可读写 localStorage 数据。
容量限制：
- 大多数浏览器限制为 5MB,超出可能导致异常。
浏览器支持：
- IE8+ 支持 localStorage，sessionStorage 需 IE10+。