HTML5缓存技术
在HTML5出来之前，通常在浏览器中使用cookie来存储用户的数据；
1. cookie在每次HTTP请求头中会带上一个标识符发送给服务器，让服务器区分请求是否来自同一个服务器，
2. cookie只能存储4k左右的数据，也就是说不能存储大数据；
在HTML5中缓存技术个人理解可以分为两种：本地缓存技术（以localStorage和sessionStorage为主）和离线缓存技术；
本地缓存技术：
1. LocalStorage缓存:将数据保存在客户端，只有用户没有手动清理。它就会一直存在。不管浏览器是否关闭，它就会一直存在；
i. LocalStorage.setItem(key,val)；localStorage是以键值对的形式创建的；
ii. LocalStorage.getItem(key)；根据键名来获取缓存的值；
iii. LocalStorage.length；获取总共缓存值得数量，localStoarge返回的是个对象；
2. SessionStorage会话缓存:会话机制是指从从打开浏览器开始访问页面的时候，到关闭页面的这一时间过程，成为会话，sessionStorage存储的数据会随着页面关闭而销毁；
i. sessionStorage.setItem(key,val)；localStorage是以键值对的形式创建的；
ii. sessionStorage.getItem(key)；根据键名来获取缓存的值；
iii. sessionStorage.length；获取总共缓存值得数量，localStoarge返回的是个对象；
localStorage的用法与sessionSorage基本一致，但是sessionStorage相对于localStorage保存时间长，同时在同一个浏览器的标签页中locastorage可以进行数据共享，sessionStoarge只能在浏览器中的标签页进行缓存；
额外补充：在浏览器中两个不同窗口页页面进行事件通信(window.onstorage)。主要用于监听其他页面缓存的数据是否发生变化而做出相应的处理；示例代码如下:
//A页面JS代码
window.localStorage.setItem("name","张三");
window.onstorage=function(){
alert("localStorage缓存的数据发生变化");
}
//B页面JS代码
/*
*改变localStorage中的值
*会让A页面中的onstorage事件触发
*/
window.localStorage.setItem("name","李四");离线缓存技术(Application Cache)
主要通过创建cache manifest文件对web应用的静态文件进行缓存，让web应用在没有网络的情况下也能正常访问页面（注意只限于页面展示，对于页面中的数据请求还是需要在网络环境下进行通信）;
离线缓存技术带来了3个优势：
1. 提升页面载入速度
2. 降低服务器压力
3. 进行离线缓存
使用方式：通过在服务端进维护manifest格式缓存文件清单，同时在html页面文件中html标签中进行设置即可；
缓存文件manifest书写格式如下：
CACHE MANIFEST #声明缓存文件
#1.0 #添加缓存文件的版本号，可以用来更新缓存文件
CACHE: #需要缓存的文件
./css/reset.css
NETWORK: #不需要缓存的文件，一般设置【*】即可
./css/style.css
FALLBACK: #当页面无法正常访问的时候所显示的页面，如404页面
4.jpg 404.jpg#4.jpg #代表需要替换的文件，404.jpg表示被替换的文件创建好manifest文件后，还需要将该文件在服务器上进行正确的配置；MIME-TYPE（text/cache-manifest）。
由于该缓存由于缓存容量有限，建议将公众文件进行缓存，或者每个页面都维护一个manifest文件来进行缓存；
离线缓存(Application Cache)执行机制:
1. 浏览器第一次请求时会判断是否存在manifest文件，根据manifest文件中的缓存清单将需要的缓存在本地；
2. 浏览器第二次请求时会判断manifest文件是否发生变化，若没有发生变化就使用第一次缓存下来的文件，减少网络请求；若manifest文件发生变化，则会回到第一步，不过这次使用的静态文件仍然是第一次请求缓存的文件，再一次重新刷新页面，会使用最新的缓存文件；或者使用window.application.ondateready事件进行页面重新加载；