前言
前端存储的方式有很多种，包括了离线缓存（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
- 储存的对象类型均为字符串类型
- 只允许同一窗口访问
网友评论