前言
前端存储的方式有很多种, 包括了离线缓存(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
储存的对象类型均为字符串类型
只允许同一窗口访问
来源: http://www.jianshu.com/p/47717c55381d