localStorage 和 sessionStorage 该怎么理解

到了 2013 年，前端页面已经不再只是“请求一次、渲染一次、结束”。很多交互都希望把一些状态留在浏览器里，于是 localStorage 和 sessionStorage 也开始被越来越多地提到。

先记住它们解决的是什么问题

最朴素的需求其实很常见：

• 记录用户上次选择的 tab
• 临时保存输入中的草稿
• 保存不需要频繁请求服务器的小状态

在以前，这类事情要么不用做，要么靠 cookie 勉强保存。HTML5 存储出现后，前端终于有了更直接的方式。

两者最重要的区别是生命周期

localStorage 更适合保存下次打开页面还想继续使用的内容；sessionStorage 更像是当前会话内的临时存储，标签页关掉之后通常就结束了。

localStorage.setItem('theme', 'simple');
sessionStorage.setItem('draftTitle', '未完成的标题');

只要先把这个边界理解清楚，很多场景就不会选错。

不要把它当数据库来用

很多新能力一出现，大家容易兴奋过头。浏览器存储很方便，但它更适合保存轻量状态，而不是把复杂业务数据长期堆进去。因为一旦结构变化、数据脏了或者用户主动清理，本地内容就可能失效。

适合做“提升体验的小动作”

我更喜欢把它理解成页面体验的辅助工具。比如记录侧边栏展开状态、记住搜索关键字、保存一个还没提交的表单值。这些东西即使丢失也不会造成业务损失，但保存下来又确实能让页面更顺手。

小结

localStorage 和 sessionStorage 在 2013 年给前端带来的，不是更复杂的架构，而是一些过去不太容易实现的小型持久化能力。把生命周期和用途分清楚，就已经能解决很多很实际的页面问题。