目录
3. Cookie、SessionStorage和LocalStorage的对比
Cookie、SessionStorage和LocalStorage:浏览器的缓存机制提供的可以将用户数据存储在客户端上的方式,常用于存储 web 页面的用户信息等数据。
1. Cookie
最早的时候 Cookie 的出现是为了解决 HTTP 的状态管理问题。
由于 HTTP 是无状态协议,它不对之前发生过的请求和响应的状态进行管理,这就导致了无法根据以前的状态来进行本次请求的处理。然而,很多情况下(比如用户登录后访问网站),由于 HTTP 无法记录之前的状态,所以跳转页面之后就需要重新登录,或者在每一次的请求中添加用以判断用户身份的参数信息,以此来管理登录状态。
为了解决这个问题,就引入了Cookie。
* 需要注意的是,
(1) 同一个域名下的所有请求,都会携带 Cookie。这就造成了一个问题,如果我们存储了过多的Cookie会带来巨大的性能浪费。随着请求的叠加,一些不必要的 Cookie 带来的开销将是无法想象的。
(2)Cookie 的存储大小最大只能有 4KB。当 Cookie 超过 4KB 时,将会被裁切,只能用来存取少量的信息。
2. Web Storage
Web Storage 是 HTML5 专为浏览器存储而提供的数据存储机制。它又分为 Local Storage 与 Session Storage,允许在浏览器中存储 key/value 对的数据(存储数据大小一般都是5MB)。
2.1 Session Storage
sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
(1)存储数据大小为 5MB;
(2)只能存储字符串类型的对象(若要存储对象,需要转换为JSON字符串);
(3)sessionStorage 仅在当前会话下有效,不同页面或标签页间无法共享sessionStorage的信息。
需要注意的是: sessionStorage引入了一个“浏览器窗口”的概念,sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在;关闭了浏览器窗口后就会被销毁。上述页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。
2.2 Local Storage
LocalStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。
(1)LocalStorage 可以将第一次请求的数据直接存储到本地,这个相当于一个 5M 大小的针对于前端页面的数据库,相比于 cookie 可以节约带宽。
(2)只能存储字符串类型的对象(若要存储对象,需要转换为JSON字符串);
(3)localStorage在浏览器的隐私模式下面是不可读取的。
(4)相同浏览器的不同页面间可以共享相同的 localStorage(同源页面),不同的网站直接是不能共用相同的 localStorage;
(5)localStorage生命周期是永久性的,没有过期时间,直到手动去删除。