-
共同点:三者都是浏览器的本地存储。
-
区别:
-
存储位置:cookie是由服务器端写入的,而SessionStorage、LocalStorage都是由前端写入的;
-
存储大小:cookie的存储空间比较小,大概4KB,而SessionStorage、LocalStorage存储空间比较大,大概5M;
-
生命周期:cookie的生命周期是由服务器端在写入的时候就设置好的,SessionStorage是页面关闭的时候就会自动清除,LocalStorage是写入就一直存在,除非手动清除;
-
数据共享:三者的数据共享都遵循同源原则,SessionStorage还限制必须是同一个页面。
-
发送请求时是否携带:在前端给后端发送请求的时候会自动携带cookie中的数据,但是SessionStorage、LocalStorage不会;
-
应用场景:cookie一般用于存储登录验证信息SessionID或者token,SessionStorage可以用来检测用户是否是刷新进入页面,如音乐播放器恢复播放进度条功能,多页表单信息填写,LocalStorage常用于存储不易变动的数据,减轻服务器的压力。
-
1. cookies
介绍:cookie,意思是小甜饼,顾名思义,cookie 确实非常小,它的大小限制为 4KB 左右;每个 HTTP 请求都会带着 Cookie 的信息,所以 Cookie 当然是能精 简就精简!
常用的应用场景:判断用户是否登录:
- 针对登录过的用户,服 务器端会在他登录时往 Cookie 中加入一段加密过的唯一辨识单一用户的辨识码,下次只要读取这个值就可以判断当前用户是否登录啦。
2. localStorage
介绍:localStorage,它是 HTML5 标准中新加入的技术,localStorage 已经被大多数浏览器所支持;
sessionStorage,它与 localStorage 的接口类似,但保存数据的生命周期与 localStorage 不同,它只是可以将一部分数据在当前会话 中保存下来,刷新页面数据依旧存在。但当页面关闭后,sessionStorage 中的数据就 会被清空。
常用的应用场景:
- localStorage 接替了 Cookie 管理购物车的工作,
HTML5 游戏通常会产生一些本地数据,localStorage 则是非常适合做 这个工作的。
3. sessionStorage
介绍:sessionStorage,它与 localStorage 的接口类似,但保存数据的生命周期与 localStorage 不同。
- 它只是可以将一部分数据在当前会话 中保存下来,刷新页面数据依旧存在。但当页面关闭后,sessionStorage 中的数据就 会被清空。
常用的应用场景:
- 如果遇到一些内容特别多的表单,为了优化用户体验,我们可能要把表 单页面拆分成多个子页面,然后按步骤引导用户填写。这时候 sessionStorage 的作用 就发挥出来了。