localStorage、sessionStorage和cookie的区别

localStorage、sessionStorage和cookie的区别

Web Storage和cookie作为web开发最常用和最常见的两种数据存储方式，我们有必要去详细的了解它。

localStorage

localStorage是HTML5的一种本地缓存方案，目前主要用于浏览器端保存体积较大的数据
(如AJAX返回结果等)。我们可以在浏览器开发者模式下Application中查看localStorage如图Chrome浏览器：

需要了解的是，localStorage 有几个核心API，使用起来非常方便。

API	描述
setItem(key, value)	设置localStorage数据
getItem(key)	获取localStorage数据
removeItem(key)	删除该域名下单条localStorage数据
clear()	删除该域名下所有localStorage数据

// 使用方法
localStorage.setItem(key, value);
localStorage.getItem(key);
localStorage.removeItem(key);
localStorage.clear();

localStorage基本支持现在的主流浏览器，而且在不同的浏览器上有不同的大小限制。但是我们要知道，这个大小限制指的是单个域名下localStorage的大小限制，不同域名之间的localStorage是独立的。所以localStorage中不适合存放过多的数据，如果存放超过最大限制的可能会读取报错，因此在使用之后我们最好移除不再使用的数据。
localStorage浏览器支持与大小限制：

浏览器	最大长度
IE8以上	5MB
Firefox8以上	5.24MB
Opera	2MB
Chrome\Safari	2.6MB

尽管单个城名下localStorage的大小是有限制的，但是可以用iframe的方式使用多个城名来突破单个页面下localStorage存储数据的最大限制。另外使用浏览器多个标签页打开同个城名页面时，localStorage内容一般是共享的。

sessionStorage

sessionStorage和localStorage的功能类似，但是sessionStorage在浏览器关闭时会自动清空sessionStorage的API和localStorage完全相同。由于不能进行客户端的持久化数据存储，实阿项目中sessionStorage的使用场景相对较少。

Cookie

Cookie指网站为了辨别用户身份或Session跟踪而储存在用户浏览器端的数据。Cookie信息一般会通过HTTP请求发送到服务器端。

一条Cookie记录主要由键、值、域、过期时间和大小组成，一般用于保存用户的网站认证信息。浏览器中Cookie的最大长度和单个域名支持的Cookie个数由浏览器的不同来决定。而且通常Cookie在浏览器中的最大长度限制为4KB。和localStorage相同，不同域名之间的Cookie信息也是独立的。

浏览器端可以通过document.cookie来获取Cookie，并且可以通过JS来处理解析。
Cookie分为两种：Session Cookie和持久行Cookie。

• Session Cookie一般不设置过期时间，表示该Cookie的生命周期为浏览器会话期间，只要关闭浏览器窗口，Session Cookie就会消失，而且Session Cookie一般不保存在硬盘上而是保存在内存里。
• 持久型Cookie 一般会设置过期时间，而且浏览器会将持久型Cookie的信息保存到硬盘上，关闭后再次打开浏览器，这些Cookie依然有效，直到超过设定的过期时间或被清空才失效。

Cookie设置中有个HttpOnly参数，前端浏览器使用docurment .cookie 是读取不到HttpOnly 类型Cookie 的，被设置为HttpOnly的Cookie记录只能通过HTTP请求头发送到服务器端进行读写操作,这样就避免了服务器端的Cookie记录被前端JavaScript修改，保证了服务端验证Cookie的安全性。