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

html本地存储之简单存储

admin
行业动态
2025-05-01
2

HTML本地存储（如localStorage）通过Web Storage API实现数据持久化，以键值对形式存储于浏览器，无需服务器交互，适用于保存用户偏好等非敏感数据，关闭页面后数据

HTML本地存储（简单存储）详解

什么是本地存储？

HTML本地存储（Web Storage）是浏览器提供的客户端存储机制，允许在用户的浏览器中保存数据，数据以键值对的形式存储，且不会随HTTP请求发送到服务器，常用于保存用户偏好设置、临时状态等。

本地存储的两种类型

特性	localStorage	sessionStorage
数据生命周期	永久保存（除非手动清除或用户清理缓存）	会话级存储（标签页关闭后自动清除）
使用场景	长期数据（如用户配置、登录状态）	短期数据（如表单临时数据、会话状态）
同源策略	遵循同源策略（仅当前域名可访问）	同上
存储容量	约5~10MB（不同浏览器限制不同）	同上
API方法	`setItem`、`getItem`、`removeItem`等	同上

核心API方法

以下方法同时适用于 localStorage 和 sessionStorage：

方法名	作用	示例
`setItem(key, value)`	存储数据（键和值均为字符串）	`localStorage.setItem('name', 'Alice');`
`getItem(key)`	获取指定键的值（返回字符串，需手动解析）	`const name = localStorage.getItem('name');`
`removeItem(key)`	删除指定键的数据	`localStorage.removeItem('name');`
`clear()`	清空所有数据	`sessionStorage.clear();`
`key(index)`	获取存储中的第`index`个键（从0开始）	`const firstKey = localStorage.key(0);`
`length`	获取当前存储的键值对数量	`console.log(sessionStorage.length);`

存储数据类型

字符串存储
直接存储字符串，无需处理：

localStorage.setItem('age', '25');
const age = localStorage.getItem('age'); // "25"

对象存储
需将对象转为JSON字符串：

html本地存储之简单存储第1张

const user = { name: 'Bob', age: 30 };
sessionStorage.setItem('user', JSON.stringify(user)); // 序列化
const storedUser = JSON.parse(sessionStorage.getItem('user')); // 反序列化

其他数据类型
布尔值、数字等需先转为字符串：

localStorage.setItem('isLoggedIn', 'true'); // 布尔值转字符串
const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true'; // 转回布尔值

代码示例

示例1：保存用户偏好主题

// 设置主题
localStorage.setItem('theme', 'dark');
// 获取主题
const theme = localStorage.getItem('theme');
if (theme === 'dark') {
  document.body.classList.add('dark-mode');
}

示例2：临时保存表单数据

// 用户输入时保存到sessionStorage
document.querySelector('#username').addEventListener('input', function(e) {
  sessionStorage.setItem('username', e.target.value);
});
// 页面加载时恢复数据
window.addEventListener('load', function() {
  const username = sessionStorage.getItem('username');
  if (username) {
    document.querySelector('#username').value = username;
  }
});

注意事项

数据安全
- 本地存储数据易被XSS攻击窃取,不可存储敏感信息（如密码、Token）。
- 数据以明文形式存储,无加密机制。
浏览器兼容性
- IE8+及以上浏览器支持，移动端主流浏览器均支持。
- 可通过typeof localStorage !== 'undefined'检测是否可用。
性能影响
频繁读写大量数据可能影响性能,建议控制存储规模。