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

1.概念理解

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

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

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

他们区别对比如下图所示:
cookie、session、localStorage 和 sessionStorage 区别及应用场景_第1张图片

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就像持有”令牌“一样可以允许访问服务器,

你可能感兴趣的:(javascript,前端,html5,javascript)