Web 本地存储

最后更新于 2018-05-27 17:27:00

为了达到某些需求，我们通常需要在本地存储一些数据，方便我们进行用户个性化定制服务。

Web 存储

在互联网上，许多网站提供用户注册功能，因为 http 协议是个无状态的协议（无法记录客户端与服务器端状态），所以我们注册登录后每一次跳转网页都需要重新登陆。为了增强用户体验，我们不得不将状态信息保存下来，而 Web 存储技术则实现了该需求。Cookie 最多可在本地存储 4K 数据，出于安全性考虑， Cookie 中并非直接存储的是用户敏感数据（帐号、密码、个人信息等），而是一个状态 ID，该 ID 是服务器端利用 session 存储一个会话状态并分配给客户端用来进行状态识别的。因此，每一次的 http 请求都会带上 Cookie 数据发送给服务器端进行状态识别，从而达到状态保持的目的。

HTML5 Web 本地存储

在以前，我们是通过 Cookie 来实现 Web 本地存储的。不过，HTML5 为我们带来了新的 Web 本地存储功能，即 localStorage 与 sessionStorage，下面我们来简单的分析一下它们各自的特点。

Cookie

Cookie 相对来说用的时间很长了，技术更加成熟，尤其是这么多年以来在 Web 安全方面也有了很大的进步，在敏感信息存储方面 Cookie 的优势是明显的。而且，Cookie 在同源窗口中是共享的，同时也可以限制在某个路径下；它的有效期也是可以设置的，没有到达有效期前即使关闭浏览器窗口依然是有效的。

相反的，Cookie 的缺点也是明显的，最多只能存储约 4K 大小的数据；而且每次都会伴随同源 http 请求发送给服务器端，很浪费带宽。

localStorage

localStorage 存储的数据量要大得多，大约 5M 左右；它在同源窗口中也是共享的。而且，localStorage 存储数据的时间甚至长达数年（不主动删除，即使浏览器关闭也存在），所以说在开发过程中我们可以使用它来存储更多的数据，并更持久的存储。

sessionStorage

sessionStorage 存储的数据量也要大得多，但它是不能在同源窗口中共享的，也就是说它只允许在同窗口同页面中访问。而且，sessionStorage 存储的数据会在浏览器窗口关闭的时候自动删除，不能实现持久的保存数据。

注意：sessionStorage 在不同的标签页之间无法共享。

结语

就目前来看，HTML5 提供的新的 Web 本地存储方法适合存储一些非敏感数据，对于用户敏感的数据还是依靠 Cookie 来存储更安全一些。而 Web 本地存储是没有绝对安全的，依然面临很严峻的考验。