本地存储（LocalStorage）
本地存储（LocalStorage） 是 HTML5 中引入的一种新的本地存储机制，它允许我们在客户端（浏览器）以 键值对（key-value） 的形式保存数据。并且这些数据在浏览器关闭后仍然可以保留。localStorage 存储为开发者提供了在客户端存储数据的便捷方式，可以用于缓存数据、保存用户偏好、实现离线功能等。
- 常用操作
- 存储数据
使用 localStorage.setItem(key, value) 方法可以将数据存储到 localStorage 中，其中 key 是键名，value 是要存储的值。localStorage.setItem('key', 'value');
- 读取数据
使用 localStorage.getItem(key) 方法可以获取 localStorage 中存储的指定键名对应的值。localStorage.getItem('key');
- 删除数据
使用 localStorage.removeItem(key) 方法可以删除 localStorage 中存储的指定键名对应的值。localStorage.removeItem('key');
- 清空数据
使用 localStorage.clear() 方法可以清空 localStorage 中存储的所有数据。localStorage.clear();
- 检查某个键是否存在
if (localStorage.getItem('key')!== null) {
console.log('键存在');// 键存在
} else {
console.log('键存在');// 键不存在
}
- LocalStorage 与 JSON 的结合使用
由于 localStorage 只能存储字符串类型的数据，因此如果我们需要存储复杂的数据类型（如对象、数组等），可以将其转换为 JSON 字符串，然后再存储到 localStorage 中。使用 JSON.stringify() 将对象转换为字符串，并在读取时使用 JSON.parse() 转回对象。const data = { name: '张三', age: 20 };
const jsonData = JSON.stringify(data);
localStorage.setItem('data', jsonData);
读取数据时，需要先将 JSON 字符串转换为对应的对象或数组。const jsonData = localStorage.getItem('data');
const data = JSON.parse(jsonData);
console.log(data); // { name: '张三', age: 20 }
注意：在使用 JSON 转换时，需要保证数据的格式是合法的 JSON 字符串，否则会抛出错误。
- LocalStorage 与 SessionStorage 的区别
- 存储位置：
- localStorage 存储在浏览器的本地存储中，数据在浏览器关闭后仍然可以保留。
- SessionStorage 存储在浏览器的会话存储中，数据在浏览器关闭后会被清除。
- 生命周期：
- localStorage 的数据在浏览器关闭后仍然可以保留，除非手动清除或超过了存储容量。
- SessionStorage 的数据在浏览器关闭后会被清除。
- 本地存储的其他方案
- Cookie：
- 存储在浏览器的 Cookie 中，数据在浏览器关闭后仍然可以保留。
- 大小限制：每个域名下的 Cookie 大小有限制，一般为 4KB。
- 安全性：Cookie 可以通过设置 HttpOnly 属性来防止 JavaScript 脚本访问，增加了一定的安全性。
- IndexedDB：
- 是一种高级的客户端存储机制，支持存储大量数据，并且具有异步操作的特性。
- 存储在浏览器的本地存储中，数据在浏览器关闭后仍然可以保留。
- 支持事务操作，可以进行批量操作。
- 支持索引，可以根据索引快速查找数据。
- 使用场景
- 缓存数据：可以将一些需要频繁访问的数据存储在 localStorage 中，避免重复请求服务器。
- 保存用户偏好：可以将用户的设置、偏好等信息存储在 localStorage 中，以便下次访问时使用。
- 注意事项
- 存储容量：localStorage 的存储容量有限，一般为 5MB 左右。
- 跨域问题：localStorage 只能在同一个域名下的页面之间共享数据，不同域名之间无法直接访问。
- 安全性：localStorage 可以通过设置 HttpOnly 属性来防止 JavaScript 脚本访问，增加了一定的安全性。
