首先讲存储方式前要先知道为什么要使用他：一是利用本地数据，介绍网络请求；二是弱网环境下，高延迟，低带宽，要把数据本地化；
1、本地存储localStorage和sessionStorage
介绍：
存储大小：5m，cookie只有4k，浏览器兼容性非常好，ie8以上都支持，ios无痕浏览失效；
这个是浏览器兼容查询网站:http://caniuse.com/
localStorage（不设置时间戳，不会过期）
sessionStorage（关闭浏览器消失）
常用方法：
localStorage.setItem(‘key’,’val’) 存数据
localStorage.getItem(‘key’) 取数据
localStorage.removeItem(‘key’) 移除数据
localStorage.key(0) 索引
localStorage.clear() 清空所有数据
使用注意事项：
1.先判断浏览器是否支持
2.写数据，需要异常处理，避免超出5m容量导致的报错
3.避免把敏感信息存入localStorage
4.key是有唯一性的
5.会跨域
6.子域名之间不能共享数据
特殊-图片储存：
1.创建 canvas
2.drawImage 这张图片
3.toDataURL 把图片转换为dataurl
4.储存在localStorage中
2、本地数据库indexedDB
介绍：
适用于存储大量结构化数据
浏览器兼容性比较差，ie10以上都支持，安全性较高
基本操作：
//创建数据库 function openDB (name) { var request=window.indexedDB.open(name); request.onerror=function(e){ console.log('OPen Error!'); }; request.onsuccess=function(e){ myDB.db=e.target.result; }; } var myDB={ name:'test', version:1, db:null }; openDB(myDB.name); //关闭数据库 function closeDB(db){ db.close(); } //删除数据库 function deleteDB(name){ indexedDB.deleteDatabase(name); }
3、离线存储application cache
介绍：
浏览器兼容性一般，ie10以上都支持
适用于更改少的单页面，可用户无网络情况下显示页面
更新机制不是很好，一般要刷新一次才能更新
使用步骤：
1.头部加manifest清单
<html manifest="demo.appcache">
2.清单内容如下：
CACHE MANIFEST CACHE: # 需要缓存的列表 style1.css 1.jpg 01.js http://localhost/applicationcache/02.js http://localhost/applicationcache/zepto.js NETWORK: # 不需要缓存的 4.jpg FALLBACK: # 访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件*.html /offline.html 2.jpg/3.jpg
3.manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置，不同的服务器不一样