如何用localStorage存储数据？-js教程-PHP中文网

如何用localStorage存储数据？

煙雲

发布： 2025-06-30 15:06:02

原创

621人浏览过

localstorage是浏览器自带的小型数据库，允许持久化存储数据。主要方法包括setitem、getitem、removeitem和clear。通常每个域名下可存储约5mb数据，适合存储用户配置或简单状态，但不适合大量或复杂数据。存储的数据不安全，用户可访问修改，敏感信息需加密处理。数据不会自动清除，除非手动清除缓存或调用clear()方法。对象类型数据需转换为json字符串存储，读取时再解析还原。与cookie相比，localstorage容量更大、有效期更长，但安全性较低。避免存储过大数据可通过使用indexeddb、服务器端存储或数据压缩等方式解决。

如何用localStorage存储数据？

localStorage就像一个浏览器自带的小型数据库，可以让你在用户的电脑上保存一些数据，即使关闭浏览器或者刷新页面，这些数据也不会丢失。

localStorage的使用其实非常简单，主要就是setItem、getItem、removeItem和clear这几个方法。

localStorage存储数据主要通过 setItem() 方法，读取数据用 getItem() 方法。

localStorage能存多少数据？

localStorage的容量其实是有限制的，每个浏览器厂商的规定可能略有不同，但通常来说，每个域名下大约能存储5MB左右的数据。虽然看起来不多，但对于存储一些用户配置、简单的应用状态或者缓存数据来说，已经足够用了。

当然，如果你需要存储大量的数据，或者数据结构比较复杂，那么可能就需要考虑使用IndexedDB或者服务器端存储了。

localStorage存储的数据安全吗？

localStorage存储的数据是保存在用户的浏览器中的，所以理论上来说，用户是可以直接访问和修改这些数据的。因此，不要在localStorage中存储敏感信息，比如用户的密码、银行卡号等等。

如果一定要存储一些敏感数据，那么一定要进行加密处理，并且要考虑到安全性问题，比如防止XSS攻击等等。

localStorage存储的数据会被清除吗？

localStorage存储的数据通常情况下是不会被自动清除的。除非用户手动清除浏览器缓存，或者调用了localStorage的clear()方法。

但是，有些浏览器可能会在存储空间不足的情况下，自动清除一些不常用的localStorage数据。所以，不要依赖localStorage来存储关键数据，最好还是要有备份机制。

localStorage存储对象类型的数据怎么处理？

localStorage只能存储字符串类型的数据。如果你想存储对象类型的数据，那么需要先将对象转换为JSON字符串，然后再存储到localStorage中。读取数据的时候，再将JSON字符串转换回对象。

例如：

// 存储对象
const user = { name: '张三', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

// 读取对象
const userStr = localStorage.getItem('user');
const userObj = JSON.parse(userStr);
console.log(userObj.name); // 输出：张三

登录后复制

注意，如果JSON字符串的格式不正确，那么调用JSON.parse()方法会抛出异常。所以，在读取数据的时候，最好要进行异常处理。