localstorage是html5提供的本地存储方案，用于在用户浏览器中持久保存数据，即使关闭浏览器或重启电脑数据仍存在；2. 它基于键值对操作，只能存储字符串，存储对象需用json.stringify()转换，读取时用json.parse()解析；3. 核心api包括：setitem()存数据、getitem()取数据、removeitem()删单个数据、clear()清空所有数据、key()配合length遍历存储内容；4. 与sessionstorage的区别在于生命周期：localstorage持久保存直至手动清除，sessionstorage仅在当前会话有效，关闭标签页即销毁；5. 存储容量通常为5-10mb，超出会抛出quotaexceedederror，建议用try…catch处理写入异常并提示用户；6. 安全性较低，数据明文存储且易受xss攻击，不应存储密码、token等敏感信息，推荐使用http-only cookie替代；7. 常见问题包括非字符串存储陷阱、容量超限、无原生过期机制、同步操作阻塞ui及跨域限制；8. 解决方案：存对象前序列化、写入时捕获异常、手动实现过期逻辑（如存时间戳）、避免主线程频繁读写、通过postmessage实现安全跨域通信。localstorage使用得当可提升用户体验，但需注意其局限与风险。
HTML5本地存储，简单来说，就是浏览器提供的一种在用户本地保存数据的方式。它和传统的Cookie有点像，但功能更强大，存储容量也更大。其中最常用、也最值得聊的就是
localStorage
，它能让你的网页在用户关闭浏览器甚至电脑后，依然能记住一些东西，下次打开时数据还在，挺方便的。
解决方案
localStorage
的使用其实非常直观，它提供了一系列API，都是基于键值对（key-value pair）来操作数据的。记住，它只能存储字符串，如果你想存对象或者数组，得先把它转成字符串，通常用
JSON.stringify()
，取出来的时候再用
JSON.parse()
转回来。
以下是几个核心用法：
立即学习“前端免费学习笔记（深入）”；
存储数据：
localStorage.setItem(key, value)
你想存什么，就给它一个名字（key）和对应的值（value）。
// 存储一个字符串localStorage.setItem('username', '张三');// 存储一个对象，需要先JSON.stringify()const userSettings = { theme: 'dark', notifications: true };localStorage.setItem('settings', JSON.stringify(userSettings));
获取数据：
localStorage.getItem(key)
通过之前设置的key，把对应的值取出来。
// 获取字符串const username = localStorage.getItem('username');console.log(username); // 输出: 张三// 获取并解析对象const settingsString = localStorage.getItem('settings');if (settingsString) { const userSettings = JSON.parse(settingsString); console.log(userSettings.theme); // 输出: dark}
删除单个数据：
localStorage.removeItem(key)
如果你不再需要某个数据，可以把它删掉。
localStorage.removeItem('username');
清除所有数据：
localStorage.clear()
这个操作会清空当前域名下所有的
localStorage
数据，用的时候要特别小心，别把用户重要的数据误删了。
localStorage.clear();
获取某个索引的key：
localStorage.key(index)
如果你想遍历
localStorage
里的所有数据，可以用这个方法配合
localStorage.length
。
for (let i = 0; i < localStorage.length; i++) { const key = localStorage.key(i); const value = localStorage.getItem(key); console.log(`${key}: ${value}`);}
localStorage与sessionStorage，到底用哪个？
这是个老生常谈的问题，也是很多初学者容易混淆的地方。简单来说，它们俩都是HTML5本地存储的一部分，API几乎一模一样，但核心区别在于数据的“生命周期”和“作用域”。
localStorage
就像一个长期的记忆本，你写进去的东西，除非你手动删除，或者用户清除浏览器缓存，否则它会一直存在。哪怕用户关闭了浏览器，甚至重启了电脑，下次再打开你的网页，数据依然在那。这非常适合存储一些长期不变的配置，比如用户的主题偏好、某个应用的登录状态（当然，敏感信息要慎重）、或者一些不频繁更新的静态数据，减少重复的网络请求。
sessionStorage
则更像一个临时的便签纸，它的数据只在当前浏览器会话（session）中有效。也就是说，只要用户关闭了当前标签页或者浏览器窗口，
sessionStorage
里的数据就会被清空。它非常适合存储一些临时的、只在当前会话中需要的数据，比如用户在某个多步骤表单中填写了一半的数据，防止页面刷新或跳转后数据丢失；或者在一次性交易流程中，存储一些临时状态。
所以，选择哪个，完全取决于你的数据需要“活”多久，以及它的“作用域”是全局持久还是当前会话。如果数据需要在用户下次访问时依然存在，选
localStorage
；如果数据只在用户本次访问期间有效，关闭页面就应该消失，那
sessionStorage
是更好的选择。
localStorage能存多少数据？安全吗？
关于
localStorage
的存储容量，其实没有一个绝对统一的标准，因为它取决于浏览器和设备。但通常情况下，主流浏览器会给每个域名分配5MB到10MB的存储空间。这比传统的Cookie（通常只有4KB）大得多，对于存储一些用户配置、离线数据缓存等来说，通常是够用的。不过，你也不能指望它能存下高清图片或者大型数据库，那肯定是不行的。如果你尝试写入超出限制的数据，浏览器会抛出一个
QuotaExceededError
错误。
至于安全性，我的看法是：
localStorage
不适合存储任何敏感信息。 为什么这么说呢？
首先，
localStorage
里的数据是明文存储在用户本地的，任何人只要能访问到用户的浏览器文件系统，就能直接读取这些数据。其次，也是更重要的，它容易受到跨站脚本攻击（XSS）的影响。如果你的网站存在XSS漏洞，恶意脚本就可以通过JavaScript直接访问并窃取
localStorage
里的所有数据。想象一下，如果用户的认证令牌（token）存在
localStorage
里，一旦被窃取，攻击者就能冒充用户进行操作，这非常危险。
所以，我的建议是：
不要存储敏感信息，比如用户密码、银行卡号、未经加密的身份凭证等。存储的数据应该是非敏感的、公开的或者易于重建的。如果确实需要存储一些认证相关的信息，考虑使用更安全的机制，比如HTTP-only的Cookie，或者结合后端加密和更严格的安全策略。始终对从
localStorage
中取出的数据进行验证和净化，以防数据被篡改或注入恶意内容。
用localStorage，我踩过哪些坑？怎么绕开它们？
我个人在用
localStorage
的时候，也遇到过一些小麻烦，总结下来，主要有这么几个：
非字符串数据存储的“陷阱”： 这是最常见的坑。
localStorage
只能存储字符串。如果你直接
localStorage.setItem('myObject', { a: 1 })
，取出来的时候会发现变成了
[object Object]
这个字符串，根本不是你想要的对象。解决办法： 存的时候用
JSON.stringify()
把对象或数组转成JSON字符串，取的时候用
JSON.parse()
转回来。
// 存const data = { name: 'Alice', age: 30 };localStorage.setItem('userData', JSON.stringify(data));// 取const storedData = localStorage.getItem('userData');const parsedData = storedData ? JSON.parse(storedData) : null;console.log(parsedData);
这里要特别注意
JSON.parse()
可能会失败，比如存储的数据本身就不是合法的JSON字符串。所以，在
JSON.parse()
之前，最好先检查
storedData
是否存在，并且可以考虑用
try...catch
来包裹解析操作，增加健壮性。
容量超限的尴尬： 虽然5-10MB听起来不少，但如果你不注意，或者用户浏览器设置了更小的限制，还是有可能存满的。一旦存满，再调用
setItem
就会抛出
QuotaExceededError
。解决办法： 在写入数据前，可以估算一下数据大小，或者更直接地，用
try...catch
来处理写入操作，一旦发生错误，可以给用户一个提示，或者尝试清除一些不重要的数据。
try { localStorage.setItem('largeData', someVeryLargeString);} catch (e) { if (e.name === 'QuotaExceededError') { console.error('LocalStorage容量不足，请清理一些数据。'); // 可以考虑清理旧数据或提示用户 } else { console.error('写入LocalStorage时发生未知错误:', e); }}
缺乏过期机制：
localStorage
的数据是永久性的，它不像Cookie那样可以设置过期时间。这意味着一旦数据存进去，除非你手动删除，或者用户清除浏览器缓存，它就永远在那。解决办法： 如果你需要为
localStorage
中的数据设置过期时间，你得自己实现一套逻辑。常见的做法是，在存储数据时，同时存储一个时间戳，每次读取数据时，都检查这个时间戳是否过期。
function setWithExpiry(key, value, ttl) { // ttl: time to live in milliseconds const now = new Date(); const item = { value: value, expiry: now.getTime() + ttl, }; localStorage.setItem(key, JSON.stringify(item));}function getWithExpiry(key) { const itemString = localStorage.getItem(key); if (!itemString) { return null; } const item = JSON.parse(itemString); const now = new Date(); if (now.getTime() > item.expiry) { localStorage.removeItem(key); // 过期了就删掉 return null; } return item.value;}// 示例：存储一个数据，1小时后过期setWithExpiry('mySessionToken', 'abcdef12345', 60 * 60 * 1000);// 稍后获取const token = getWithExpiry('mySessionToken');
这种手动管理过期时间的做法，虽然增加了代码量，但能让你更灵活地控制数据的生命周期。
同步操作的性能影响：
localStorage
的所有操作都是同步的，这意味着当你在主线程中进行大量
localStorage
读写时，可能会阻塞UI，导致页面卡顿。解决办法： 尽量避免在主线程中进行大量、频繁的
localStorage
操作。如果确实需要处理大量数据，考虑使用Web Workers将数据处理放到后台线程，或者将数据存储到IndexedDB，它是一个异步的客户端数据库，更适合存储大量结构化数据。对于小规模的数据，
localStorage
的性能影响通常可以忽略不计。
跨域问题：
localStorage
遵循同源策略（Same-Origin Policy），这意味着只有来自同一个域名、同一个协议、同一个端口的页面才能访问彼此的
localStorage
数据。解决办法： 这是安全机制，无法“绕过”。如果你需要在不同子域之间共享数据（例如
a.example.com
和
b.example.com
），可以考虑通过
document.domain
来设置，但这有安全风险。更推荐的做法是利用
postMessage
进行跨域通信，或者将共享数据存储在服务器端。
这些都是我在实际开发中遇到过的一些点，希望对你有所帮助。
localStorage
是个好工具，但用得巧不巧，就看你对它的理解和实践了。
以上就是HTML5本地存储是什么？localStorage怎么用？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1570430.html
微信扫一扫 
支付宝扫一扫 
