HTML5本地存储是什么？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

JSON.stringify()

JSON.parse()

以下是几个核心用法：

立即学习“前端免费学习笔记（深入）”；

1. 存储数据：

   localStorage.setItem(key, value)

   你想存什么，就给它一个名字（key）和对应的值（value）。

   // 存储一个字符串
   localStorage.setItem('username', '张三');
   
   // 存储一个对象，需要先JSON.stringify()
   const userSettings = { theme: 'dark', notifications: true };
   localStorage.setItem('settings', JSON.stringify(userSettings));

2. 获取数据：

   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
   }

3. 删除单个数据：

   localStorage.removeItem(key)

   如果你不再需要某个数据，可以把它删掉。

   localStorage.removeItem('username');

4. 清除所有数据：

   localStorage.clear()

   这个操作会清空当前域名下所有的

   localStorage

   数据，用的时候要特别小心，别把用户重要的数据误删了。

   localStorage.clear();

5. 获取某个索引的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

sessionStorage

所以，选择哪个，完全取决于你的数据需要“活”多久，以及它的“作用域”是全局持久还是当前会话。如果数据需要在用户下次访问时依然存在，选

localStorage

sessionStorage

企奶奶

一款专注于企业信息查询的智能大模型，企奶奶查企业，像聊天一样简单。

下载

localStorage能存多少数据？安全吗？

关于

localStorage

QuotaExceededError

至于安全性，我的看法是：

localStorage

首先，

localStorage

localStorage

localStorage

所以，我的建议是：

• 不要存储敏感信息，比如用户密码、银行卡号、未经加密的身份凭证等。
• 存储的数据应该是非敏感的、公开的或者易于重建的。
• 如果确实需要存储一些认证相关的信息，考虑使用更安全的机制，比如HTTP-only的Cookie，或者结合后端加密和更严格的安全策略。
• 始终对从

  localStorage

  中取出的数据进行验证和净化，以防数据被篡改或注入恶意内容。

用localStorage，我踩过哪些坑？怎么绕开它们？

我个人在用

localStorage

1. 非字符串数据存储的“陷阱”： 这是最常见的坑。

   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

   来包裹解析操作，增加健壮性。

2. 容量超限的尴尬： 虽然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);
       }
   }

3. 缺乏过期机制：

   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');

   这种手动管理过期时间的做法，虽然增加了代码量，但能让你更灵活地控制数据的生命周期。

4. 同步操作的性能影响：

   localStorage

   的所有操作都是同步的，这意味着当你在主线程中进行大量

   localStorage

   读写时，可能会阻塞UI，导致页面卡顿。 解决办法： 尽量避免在主线程中进行大量、频繁的

   localStorage

   操作。如果确实需要处理大量数据，考虑使用Web Workers将数据处理放到后台线程，或者将数据存储到IndexedDB，它是一个异步的客户端数据库，更适合存储大量结构化数据。对于小规模的数据，

   localStorage

   的性能影响通常可以忽略不计。

5. 跨域问题：

   localStorage

   遵循同源策略（Same-Origin Policy），这意味着只有来自同一个域名、同一个协议、同一个端口的页面才能访问彼此的

   localStorage

   数据。 解决办法： 这是安全机制，无法“绕过”。如果你需要在不同子域之间共享数据（例如

   a.example.com

   和

   b.example.com

   ），可以考虑通过

   document.domain

   来设置，但这有安全风险。更推荐的做法是利用

   postMessage

   进行跨域通信，或者将共享数据存储在服务器端。

这些都是我在实际开发中遇到过的一些点，希望对你有所帮助。

localStorage