cookie、session、localStorage 和 sessionStorage 区别及应用场景

1.概念理解

Cookie它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

localStorage 是 HTML5 标准中新加入的技术，localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据。

sessionStorage 与 localStorage 的接口类似，相较cookie一般存储大一些的数据，但保存数据的生命周期与 localStorage 不同。 Session的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

他们区别对比如下图所示：

2.应用场景

1、在开发中每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简，比较常用的一个应用场景就是判断用户是否登录。
2、针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录。
3、用到 Cookie 来保存用户在电商网站的购物车信息，如今有了 localStorage，一方面 localStorage 接替了 Cookie 管理购物车的工作，同时也能胜任其他一些工作。
4、产生一些本地数据，localStorage是非常适用，遇到一些内容特别多的表单，优化用户体验，可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写发挥sessionStorage 的作用。

cookie:（1）判断用户是否登陆过网站，以便下次登录时能够实现自动登录。
			如果我们删除cookie，则每次登录必须中心填写登录的相关信息。
		（2）保存上次登录的时间等信息
		（3）保存上次查看的页面
		（4）浏览计数
session:用于保存每个用户的专用信息，变量的值保存在服务器端，通过sessionid来区分不同的客户。
	（1）网上商城中的购物车
	（2）保存用户登录信息
	（3）将某些数据放入session中，供同一用户的不同页面使用。
	（4）防止用户非法登录

3.常用方法

localStorage常用方法: 用在多窗口（页面）共享数据，同一浏览器可以共享数据

localStorage.setItem(key,value) ：存储数据
localStorage.getItem(key) ：获取数据
localStorage.removeItem(key) ：删除数据
localStorage.clear() ：清空数据 / 删除所有数据

sessionStorage常用方法: 用在同一个窗口（页面）下的数据可以共享

sessionStorage.setItem(key, value) ：存储数据
sessionStorage.getItem(key) ：获取数据
sessionStorage.removeItem(key) ：删除数据
sessionStorage.clear() ：删除所有数据

4.token

Token是诞生在服务器，但是保存在浏览器这边的，由客户端主导一切，可以放在Cookie和Storage里面，持有Token就像持有”令牌“一样可以允许访问服务器，