Cookie, LocalStorage 与 SessionStorage

基本概念

Cookie 是小甜饼的意思。顾名思义,cookie 确实非常小,它的大小限制为 4KB 左右。

localStorage

localStorage 是 HTML5 标准中新加入的技术。是一种持久化本地存储方案。并且不会参与浏览器的通信。

sessionStorage

sessionStorage 与 localStorage 的接口类似,但保存数据的生命周期与 localStorage 不同。

异同

特性 Cookie localStorage sessionStorage
生命期 一般由服务器生成,可设置失效时间。如果在浏览器端生成 Cookie,默认是关闭浏览器后失效 除非被清除,否则永久保存 仅在当前会话下有效,关闭页面或浏览器后被清除
存储大小 4K 左右 一般为 5MB 同 localStorage
与服务器通信 每次都会携带在 HTTP 头中,如果使用 cookie 保存过多数据会带来性能问题 仅在客户端(即浏览器)中保存,不参与和服务器的通信 同 localStorage
易用性 需要程序员自己封装,源生的 Cookie 接口不友好 源生接口可以接受,亦可再次封装来对 Object 和 Array 有更好的支持 同 localStorage

应用场景

因为考虑到每个 HTTP 请求都会带着 Cookie 的信息,所以 Cookie 当然是能精简就精简啦,比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户,服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码,下次只要读取这个值就可以判断当前用户是否登录啦。曾经还使用 Cookie 来保存用户在电商网站的购物车信息,如今有了 localStorage,似乎在这个方面也可以给 Cookie 放个假了~

而另一方面 localStorage 接替了 Cookie 管理购物车的工作,同时也能胜任其他一些工作。比如 HTML5 游戏通常会产生一些本地数据,localStorage 也是非常适用的。如果遇到一些内容特别多的表单,为了优化用户体验,我们可能要把表单页面拆分成多个子页面,然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。