HTML5中的localStorage什么时候会被清空

localStorage 永久存储,并且在 sessionStorage 会话期间有效。
一旦浏览器关闭,所有SessionStorage都将被删除。
除非你手动删除它,否则localStorage将一直存在。

上周我刚刚处理了一位提出这个问题的用户。
LocalStorage确实很烦人,因为数据太大,很容易卡住。
sessionStorage适合临时使用。
你觉得这两种用途怎么样?

html5可以保存到本地吗

说白了,localStorage和sessionStorage是HTML5 给我们提供的两个在本地存储数据的强大工具。

我们先来说说最重要的事情。
LocalStorage 用于持久存储。
即使您的计算机关闭,数据也不会丢失,除非您自己手动删除。
去年我们跑一个电商项目的时候,我们用它来存储用户收藏的商品列表。
当我们刷新页面时,我们仍然可以看到之前选择的项目,非常方便。
还有一点是它没有过期日期,适合存储长期信息,例如用户偏好和登录状态。
但有一个关键细节。
它存储所有字符串。
如果要存储数字或对象,则需要使用 JSON.stringify 进行转换,否则将是一个混乱的字符串。

还有另一个重要的细节。
SessionStorage是临时存储。
它对您当前的浏览器选项卡有效,关闭时会自动清除。
去年我们创建多步骤注册表时,我们将中间步骤数据存储在sessionStorage中。
如果用户中途放弃或关闭页面,数据就会消失,从而防止敏感信息残留。
它与localStorageAPI相同,但主要区别是生命周期短,并且不同选项卡的session Storage是隔离的。
如果您将数据存储在选项卡 A 中,选项卡 B 将看不到它。

一开始我以为sessionStorage比localStorage更安全,后来发现我错了。
事实上,两者都相当痛苦——数据在客户端,XSS攻击可以直接破坏你存储的数据,所以敏感信息不应该放在这里。
另外,虽然存储容量很大,但如果超过5 MB,浏览器可能会冻结,所以不要忘记根据需要进行清除。

建议尝试更多sessionStorage。
它特别适合存放临时数据,但不要忘记放置任何重要的东西。

cookie、localStorage、sessionStorage详解