DEV Community
·
在localStorage中存储和检索JavaScript对象
内容提要
本文讲解了如何在浏览器的localStorage中存储JavaScript对象。通过JSON.stringify将对象转为字符串，再用JSON.parse还原为对象，实现数据持久化。localStorage与sessionStorage的区别在于数据持久性，localStorage在浏览器关闭后仍保留数据。文章还比较了Web Storage与HTTP cookies，指出localStorage适合存储非敏感数据，并提醒注意存储限制和同步操作可能带来的性能问题。
关键要点
-
本文讲解如何在localStorage中存储JavaScript对象。
-
使用JSON.stringify将对象转为字符串，使用JSON.parse还原为对象，实现数据持久化。
-
localStorage与sessionStorage的区别在于数据持久性，localStorage在浏览器关闭后仍保留数据。
-
localStorage适合存储非敏感数据，需注意存储限制和性能问题。
-
localStorage对象允许开发者在客户端浏览器中存储数据，数据不会过期。
-
sessionStorage临时存储数据，仅在当前标签页有效，关闭标签页后数据丢失。
-
localStorage和sessionStorage的主要区别在于数据的持久性和共享性。
-
Web Storage与HTTP cookies的比较，cookies适合存储小数据，且会随每个请求发送。
-
cookies在隐私方面存在问题，尤其是第三方cookies。
-
存储JavaScript对象时需先将其序列化为字符串，使用JSON.stringify和JSON.parse。
-
localStorage的存储限制为每个源5-10MB，操作是同步的，可能影响性能。
-
JSON安全的数据类型包括数字、布尔值和字符串，函数和未定义的值不安全。
-
总结：使用localStorage存储JavaScript对象时，需先转换为JSON字符串。
延伸问答
如何在localStorage中存储JavaScript对象？
使用JSON.stringify将对象转换为字符串，然后使用localStorage.setItem存储该字符串。
localStorage和sessionStorage有什么区别？
localStorage的数据在浏览器关闭后仍然保留，而sessionStorage的数据仅在当前标签页有效，关闭标签页后数据会丢失。
使用localStorage存储数据时需要注意什么？
需要注意存储限制（每个源5-10MB）和操作是同步的，可能影响性能。
如何从localStorage中检索存储的JavaScript对象？
使用localStorage.getItem获取存储的字符串，然后使用JSON.parse将其转换回对象。
localStorage适合存储哪些类型的数据？
localStorage适合存储非敏感数据，如用户偏好和应用状态。
为什么不建议在localStorage中存储敏感数据？
因为存储在Web Storage中的数据可以被同一源的任何JavaScript代码访问，存在安全风险。
