前端本地存储(Cookie、LocalStorage、Sessi
前言
前端存储的方式有很多种,包括了离线缓存(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
- 储存的对象类型均为字符串类型
- 只允许同一窗口访问