h5本地存储 html本地存储 localstorage
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怎么用？的详细内容，更多请关注乐哥常识网其它相关文章！