HTML5的存储方式

之前的方式
1、cookies的用法和缺陷
2、userdata
html5时代
1、localstorage
2、application cache
3、indexedDB
使用规范特点、使用、业务场景
html5存储（案例）
1、如何把图片存在客户端
2、跨域共享客户端缓存
3、客户端的数据库
1、h5常见的几种存储方式
2、localstorage和sessionsorage
3、application cache
一、关于存储：
cache:缓存，功能：从磁盘拿到的东西放到缓存里
2、磁盘文件：图片等存到磁盘上
3、数据库:俩种表有某种关系的话
4、内存:频繁的使用，频繁的读取，提升速度
cookies诞生：
cookies：http请求头会带着，跟着http请求头被带上网络的话，安全性问题、大小4k，对于每一个域名，主Domain污染，都放在子域名之下，访问都会带着主域名，主域名可能会污染。
存到购物车里，身份的验证放到cookies里
若http-only:true;cookie只能被服务器端修改
userData:只有IE支持，在XML文件存储
H5的存储：
解决4k大小的问题，
请求头带着存储信息的问题，不安全，跨浏览器
H5的存储
本地存储：
localstorage和sessionstorage
存储方式：key–>value
localstorage是永久存储的，除非手动删除，
sessionstorage是关闭页面就消失了
API介绍：
getItem
setItem(key,value)
removeItem
key(索引)
clear（全部删除）
使用限制：
过期控制，需要自己限制
子域名之间不能共享存储数据
server端没有办法访问到，加到http请求中加载到浏览器端
indexedDB database
一种能在浏览器中持久存储结构和数据的数据库，并且为web应用提供了丰富的查询能力
indexDB增删改、事务、游标、
离线缓存
navigator.onLine

cookie和localstorage的区别
相同点：都可以实现存储
不同点：
1、存储大小，cookie只能存4kb，localstorage可以存储5M
2、存储时间（生命周期）localstorage永久存储的，cookie可以设置存储时间，默认是浏览器关闭后失效
3、http请求，cookie每次都有携带在http头上，localstorage仅仅在浏览器端存储
4、安全性，cookie不安全，localstorage相对安全一些
5、易用性，cookie需要自己使用document.cookie封装方法，localstorage可以直接使用localstorage.setItem(key,value),localstorage.getItem(key)设置和获取
6、应用场景，cookie一般用于识别用户登陆，localstorage用于跨页面传递参数
7、浏览器支持情况，localstorage是h5的新特性，所以浏览器支持性比较好，cookie可以使用navigator.cookieEnabled判断是否支持