前端本地存储（Cookie、LocalStorage、SessionStorage）

前言

前端存储的方式有很多种，包括了离线缓存（application cache），Web SQL，IndexedDB以及本地存储的Cookie、LocalStorage、SessionStorage，本文主要对Cookie、LocalStorage、SessionStorage这三者的作用、区别以及应用场景进行描述。

通常我们会在浏览器的开发者模式中的Application的Storage中找到

---

COOKIE

含义

Cookie又叫会话跟踪技术，事实上就是以Key，Value的形式存储在浏览器端的数据。

工作原理

1.在Request的时候，浏览器将Cookie信息放在HTTP-Request Headers中。
2.在Response的时候，浏览器保存HTTP-Response Headers信息中的Cookie信息。
3.Cookie的核心信息包含三个部分：Name、Value、过期时间。
4.Cookie的保存是覆盖式的，所以Cookie的添加、更新、删除对于浏览器来说都是执行设置（set）的动作。
5.存储属性除了Name、Value、过期时间，还有Domain、Path，当前域可以操作当前域子域、父域名的Cookie，当前Path，可以操作当前Path以及当前Path子、父Path下的Cookie

为什么需要强调它的工作原理呢？事实上cookie的作用、缺点甚至于缺点的改善都是围绕工作原理进行的。

作用

• 会话状态管理（如用户登录状态、购物车、游戏分数和其它需要记录的信息）
• 个性化设置（如用户自定义设置、主题等）

传输特点

• 每次Request客户端符合domian以及path要求的Cookie都会通过Request Headers传输到服务器端
• 传输的Cookie大小会受到浏览器以及Web服务器的限制

安全特点

• Cookie中的信息很容易被查看，建议加密后存储
• Cookie容易被XSS攻击利用，可以设置HttpOnly=true，不允许客户端访问

应用

• 设置：document.cookie = 'key=val;path:/;expires='+d （d为时间）
• 获取：document.cookie
• 删除cookie： 将过期时间设置为负值

缺点

• 存储大小最多4KB
• 存储数量根据浏览器或浏览器版本的不同而不同，并且每个域最多20条
• 不安全（请求头常带存储信息）
• 存储数据类型限制，cookie只能存储字符串

提高安全性措施

• 对保存到cookie里面的敏感信息必须加密
• 设置HttpOnly为true，防止Cookie值被页面脚本读取
• 设置Secure为true，只有在https协议下访问的时候，浏览器才会发送该Cookie
• 给Cookie设置有效期（分一个长时间不活动的失效时间与即使一直在活动也要失效的时间）

Web Storage

准确地来说，因为cookie确切地存在着缺点，h5也对其进行了优化。因此localStorage和sessionStorage解决了不少cookie的缺点，也被作为本地存储的重要方式。

Web Storage API

length——数据长度
setItem (key, value) —— 保存数据，以键值对的方式储存信息
getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值
removeItem (key) —— 删除单个数据，根据键值移除对应的信息
clear () —— 删除所有的数据
key (index) —— 获取某个索引的key

---

LocalStorage

特点

• 生命周期是永久性的。即使关闭浏览器，数据也不会销毁
• 存储大小一般为5M
• 需要主动去销毁
• 储存的对象类型均为字符串类型
• 同源可以读取并修改localStorage数据

SessionStorage

特点

• 生命周期是在浏览器关闭前。即关闭浏览器数据就会销毁
• 存储大小一般为5M
• 储存的对象类型均为字符串类型
• 只允许同一窗口访问