一、Cookie
- 什么是Cookie
数据存储到计算机中，通过浏览器控制添加与删除数据
- Cookie特点
- 存储限制: 一个域名Cookie数是有限的(根据浏览器而定)，每个4kb;
- Cookie会包含在每个HTTP请求中向服务器发送，这回导致多次发送重复数据；
- Cookie在网络传输时并未加密，也可能会有安全隐患;
- 页面间的Cookie是共享的;
二、Storage
使用Storage保存key-value时，key、value都只能是字符串(如果有复杂数据，可以将结构化数据封装成JSON，再将JSON对象转为字符串保存)。
- sessionStorage
- session临时会话，从页面打开到页面关闭的时间段；
- 窗口的临时促成了，页面关闭，本地存储消失；
- localStorage
- 永久存储(可以手动删除数据)
- Storage的特点
- 存储量限制(5M);
- 客户端完成，不会请求服务器处理；
- sessionStorage数据是不共享、localStorage共享
三、Storage操作方法
- setItem()
- 设置数据，key/value类型，类型都是字符串；
- 可以用获取属性的形式操作；
window.sessionStorage.setItem('name', oText.value);
window.localStorage.setItem('name', oText.value);
- getItem()
- 获取数据，通过key来获取到对对应的value；
window.sessionStorage.getItem('name')
window.localStorage.getItem('name')
- removeItem()
- 删除数据，通过key来删除对应的value；
window.sessionStorage.removeItem('name');
window.localStorage.removeItem('name');
- clear()
- 删除全部存储的值;
window.sessionStorage.clear();
window.localStorage.clear();
案例: 存储注册信息(第一次没填写完关闭，当第二次打开时，之前填写的内容还是存在的)
// 当窗口关闭时触发window.onunload = function(){}
四、Storage存储事件
- storage事件
- 当有数据修改或删除的情况下，就会触发storage事件
- 在对数据进行改变的窗口对象是不会触发的
- key: 修改或删除的key，如果调用clear()，key为null
- newValue: 新设置的值，如果调用removeStorage()，key为null
- oldValue: 调用改变前的value值
- storageArea: 当前的storage对象
- url: 触发该脚本变化的文档的url
- sessionStorage在同窗口下才可以，例如iframe操作就是同窗口的操作；
// 添加storage事件(本窗口不触发，在其他窗口触发)
window.addEventListener('storage', function(ev){
ev = ev || window.event;
console.log('key:' + ev.key);
console.log('newValue:' + ev.newValue);
console.log('oldValue:' + ev.oldValue);
console.log('storageArea:' + ev.storageArea);
console.log('url:' + ev.url);
});
案例: 同步购物车(不管哪个页面操作了，但都是同步的)
离线缓存策略
1、localStorage, sessionStorage(字符串键值对在本地存储数据，方便灵活，但是对于大量结构化数据存储力不从心)
2、indexedDB (浏览器中持久地存储结构化数据的数据库)
3、web sql(已经被废弃)
4、application cache (完全离线资源缓存，加载更快 降低服务器负载，单地址页面对实时性要求不要的业务 离线web应用)
之前会使用cookies，每次的http请求头中，都会带有cookies——缺点；每个域名只能存储4K大小的cookies；主域名污染: 如果我们使用cookies存储主域名的东西，那么子域名下得Http请求都会带上主域名的东西；如果关联上网络，那么将带来安全问题。
所以，通常我们会使用cookies用在如购物车、身份验证等问题上。
