cookie sessionStorage localStorage 区别（详解）

分析：

数据存储位置、生命周期、存储大小、写入方式、数据共享、发送请求时是否携带、应用场景

共同点：

都是存储在浏览器本地的【存储位置】

不同点：

写入方式：

cookie 是由服务器端写入的，而 SessionStorage、 LocalStorage 都是由前端写入的；

生命周期：

cookie 的生命周期是由服务器端在写入的时候就设置好的

LocalStorage 是写入就一直存在，除非手动清除

SessionStorage 是页面关闭的时候就会自动清除

存储大小：

cookie 存储空间大约 4KB，SessionStorage、 LocalStorage 存储空间比较大，大概 5M

注：每个浏览器可能存在差异

数据共享：

Cookie、SessionStorage、 LocalStorage 数据共享都遵循同源原则（所谓"同源"指的是"三个相同"：协议，域名，端口），SessionStorage 还限制必须是同一个页面（sessionStorage 不支持跨标签页共享数据）。

请求时是否携带：

发送请求的时候会自动携带 Cookie 中的数据，但 SessionStorage、 LocalStorage 不会；

应用场景：

Cookie 一般用于存储登录验证信息 SessionID 或者 token，LocalStorage 常用于存储不易变动的数据，减轻服务器的压力，SessionStorage 可以用来检测用户是否是刷新进入页面，如音乐播放器恢复播放进度条的功能。