一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第27天，点击查看活动详情。
cookie
cookie 存储在客户端： cookie 是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。
- 本身
用于浏览器和server通讯 - 被‘借用’到本地存储来
- 可用 document.cookie= '' 来修改 缺点
- 存储大小：最多
4kb - http请求时需要发送到服务器端，增加请求数据量
- 只能用document.cookie=''来修改，过于简陋
- 都会消耗网络的带宽
- 不加密则不安全
document.cookie = 'a=100'
document.cookie // a=100
document.cookie = 'b=200'
document.cookie // a =100;b=200
适用场景
- 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
- 个性化设置（如用户自定义设置、主题等）
- 浏览器行为跟踪（如跟踪分析用户行为等）
localStorage和sessionStorage
- HTML5专门为存储而设计，最大可存
5MB - API简单易用
setItem(key,value) , getItem(key) 不会随着http请求被发送出去- 只能存储字符串对象
- 不同浏览器无法共享
localStorage与SessionStroage中的信息。相同浏览器的不同页面间（同源页面）可以共享相同的localStorage，但不能共享sessionStorage。
localStrorage
保存方式：将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。（保存在客户端，不与服务器进行交互通信。）
应用场景：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据
sessionStorage
保存方式：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据（保存在客户端，不与服务器进行交互通信。）
应用场景：敏感账号一次性登录；
区别
- localStorage 数据会永久存储，除非代码或手动删除
- sessionStorage 数据只存在于当前会话，浏览器关闭则清空
- 一般用localStorage会更多一点
