大家好，我是第八哥，作为一个摸爬滚打了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是个好工具，但得用对地方。了解它的特性和坑，才能在项目里发挥它的价值。
标签：
localStorage
使用技巧
大小限制
常见问题
JavaScript存储技术
上一篇
Web Workers多线程调试实战指南：解决内存隔离与通信异常的5大技巧 | 前端性能优化
下一篇
JavaScript 数组操作常见问题与解决方案 | 高效开发技巧解析