在网页开发中，管理本地存储数据通常依赖浏览器内置的Web Storage接口。通过编写一组html函数，我们可以将localStorage与sessionStorage的操作封装起来，让数据读写更安全、更易维护。
一、Web Storage的基本类型
Web Storage分为两种对象，它们的API完全一致，但生命周期不同：
- localStorage：持久保存，除非手动删除或清空浏览器数据，否则一直存在。
- sessionStorage：会话级保存，标签页或浏览器关闭后数据自动消失。
二、封装html函数管理数据
原生写法需要反复调用setItem和getItem，且只能存字符串。下面用函数统一处理序列化与异常。
1. 通用写入函数
// 写入本地存储，type可选 local 或 session
function saveData(key, value, type) {
var storage = type === 'session' ? sessionStorage : localStorage;
try {
storage.setItem(key, JSON.stringify(value));
} catch (e) {
console.error('写入失败：' + e.message);
}
}
2. 通用读取函数
// 读取并解析，解析失败返回默认值
function loadData(key, defaultValue, type) {
var storage = type === 'session' ? sessionStorage : localStorage;
var raw = storage.getItem(key);
if (raw === null) {
return defaultValue;
}
try {
return JSON.parse(raw);
} catch (e) {
return defaultValue;
}
}
3. 删除与清空
// 删除指定键
function removeData(key, type) {
var storage = type === 'session' ? sessionStorage : localStorage;
storage.removeItem(key);
}
三、实例：保存用户偏好
假设要记住用户选择的主题色，可用如下调用：
saveData('theme', { color: 'dark' }, 'local');
var theme = loadData('theme', { color: 'light' }, 'local');
console.log('当前主题：' + theme.color);
四、两种存储的差异对比
| 对比项 | localStorage | sessionStorage |
|---|---|---|
| 生命周期 | 永久 | 标签页会话期 |
| 跨标签页共享 | 是 | 否 |
| 适用场景 | 用户配置、离线缓存 | 表单暂存、单页状态 |
五、注意事项
在html函数内部不要直接拼接未转义的标签名，如描述<input>元素时应转义。另外，存储敏感信息有泄露风险，建议仅保存非机密数据。通过统一的函数管理，能明显降低键名冲突与解析错误的概率。
Web_StoragelocalStoragesessionStorage修改时间：2026-07-31 11:27:20