cookies、localStorage 、sessionStorage 的区别

1. 共同点：三者都是浏览器的本地存储。

2. 区别：

   • 存储位置：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 的作用 就发挥出来了。

4. 区别