大家好，我是第八哥，作为一个摸爬滚打了10年的互联网开发老兵，我敢说 localStorage 是前端存储里最常用的工具之一。但不少同行其实没真正吃透它，今天咱们就来好好聊聊。
什么是localStorage？
简单地说，localStorage是浏览器提供的本地存储方案，属于Web Storage API的一种。它能让数据长久保存在用户浏览器里，就算关了页面、重启浏览器，数据也不会丢失。
这一点比sessionStorage强——后者关了页面就清空。所以localStorage特别适合存一些不常变但又常用的信息，比如用户偏好设置、登录状态标记等。
localStorage的基本用法（附代码）
localStorage的用法其实很简单，就几个核心方法，记熟了就能上手。
1.存储数据：用 setItem 方法，第一个参数是键名，第二个是值。注意，它只能存字符串，所以对象要转一下：
// 存字符串
localStorage.setItem('username', 'Bob');
// 存对象（先将对象序列化）
localStorage.setItem('user', JSON.stringify({ age: 28, gender: 'man' }));2.读取数据：用 getItem 方法，参数为键名。拿到字符串后，如果存储的是对象，要再给转回来：
// 取字符串
const username = localStorage.getItem('username');
// 取对象（要反序列化）
const user = JSON.parse(localStorage.getItem('user'));3.删除数据：删除指定键名的数据用removeItem，清空所有数据用clear：
// 删单个
localStorage.removeItem('username');
// 清空所有
localStorage.clear();localStorage的大小限制有多大？
这是大家常问的问题。一般来说，绝大多数现代浏览器（Chrome、Firefox、Edge等）对 localStorage 的存储上限为 5MB。在浏览器的隐私模式下，数据可能无法持久化或容量更小。
注意：这个限制是针对单个域名的，多域名不共享。
当存储超过 5MB 的数据时会抛出 QuotaExceededError 异常，但是已存在的数据仍可读取。
那我们怎么检测自己项目的实际限制呢？可以写个循环存数据，直到报错，不过千万别在生产环境乱试，可能会导致浏览器卡慢。
function testMaxCapacity() {
const testKey = '__capacity_test__';
let data = 'x'; // 初始测试数据
let totalBytes = 0;
try {
// 每次循环倍增数据量
while (true) {
localStorage.setItem(testKey, data);
totalBytes = data.length * 2; // UTF-16编码
data += data; // 数据量倍增
}
} catch (e) {
if (e.name === 'QuotaExceededError' || e.code === 22) {
console.log(`最大容量≈${(totalBytes / 1024 / 1024).toFixed(2)} MB`);
}
} finally {
localStorage.removeItem(testKey); // 清理测试数据
}
}
testMaxCapacity(); // 输出：最大容量≈5.00 MBlocalStorage的常见问题及解决办法
1. 存不了对象/数组？ 前面已经说了，它只认字符串。解决办法就是用JSON.stringify转成字符串存储，取的时候再用JSON.parse转回来，这是标配操作。
2. 没有过期时间？ 对，它不会自己过期。如果需要过期功能，得自己实现：存储数据时顺便存个时间戳，取的时候判断是否超过有效期。
// 存带过期时间的数据
const saveWithExpiry = (key, value, expiryInMinutes) => {
const now = new Date();
const item = {
value: value,
expiry: now.getTime() + expiryInMinutes * 60000
};
localStorage.setItem(key, JSON.stringify(item));
};3. 跨域不能访问？ 由于浏览器的同源策略限制，A域名存的数据，B域名拿不到。这是安全机制，没法直接绕过，只能通过后端进行中转。
4. 存太多卡页面？ 数据量大了，读写就会变慢。建议拆分数据，或者用IndexedDB存大量数据。
localStorage实战技巧
- 1. 封装工具函数：把存、取、删、判断过期这些操作封装起来，避免重复代码，也方便维护。
- 2. 监听变化：用
window.addEventListener('storage', (e) => {})可以监听其他页面的localStorage变化，适合多标签页通信。 - 3. 避免敏感数据：它是明文存储的，开发者工具中能直接看到，所以别存密码、token这些敏感信息。
localStorage的优缺点
优点：用法简单，数据持久化，不占服务器资源，适合存轻量数据。
缺点：容量小，只能存字符串，明文存储，无过期机制，跨域受限，可能被用户手动清空。
总的来说，localStorage是个好工具，但得用对地方。了解它的特性和坑，才能在项目里发挥它的价值。
评论