HTML5存储

#####客户端存储历程
######远古时期

cookies的用法和缺陷

http请求头上会带着、大小4k、主Domain污染

userdata

只有IE支持、XML文件

######目标

解决4k的小小问题、解决请求头常带存储信息的问题、解决关系型存储的问题、跨浏览器

######HTML5时代

本地存储localstorage && sessionstorage

  localstorage永久存储，永不失效，除非手动删除，sessionstorage会随着关闭页面或浏览器失效；

  每个域名5M 常用localstorage和sessionstorage API：getItem() setItem() removeItem() key() clear()；

  可以存数组、json数据、图片、脚本、样式文件；

  需要考虑的：1.存储更新策略，过期控制；2.子域名之间不能共享存储数据；3.超出存储大小之后如何存储（LRU、FIFO）；4.server端如何取到。

离线缓存application cache

indexedDB和WebSQL
  一种能在浏览器中持久地存储结构化数据的数据库，并且为Web应用提供了丰富的查询能力。
  IndexDB按域名分配独立空间，偏向于NoSQL操作数据库。1个独立域名——>n个数据库——>n个对象存储空间（表）——>n个对象数据。
  Web SQL使用SQL操作数据库，核心方法：openDatabase、transaction、executeSql，W3C已停止维护。

######

使用注意事项

使用前判断浏览器是否支持 写数据时，需要异常处理，避免超出容量抛错 避免把敏感信息写入localstorage key的唯一性

######HTML5存储案例

//如何实现把图片存在客户端？
var src = "111.jpg";
function set(key){
var img = document.createElement('img');
img.addEventListener("load",function(){
var imgCanvas = document.createElement("canvas");
imgContext = imgCanvas.getContext("2d");
//确保canvas元素的大小和图片尺寸一致
imgCanvas.width = this.width;
imgCanvas.height = this.height;
//渲染图片到canvas中
imgContext.drawImage(this.0,0,this.width,this.height);
//用data url的形式取出
var imgAsDataURL = imgCanvas.toDataURL("image/png");
//保存到本地存储中
try {
localstoreage.setItem(key,imgAsDataURL);
}catch(e){
console.log("Storage failed: " + e);
}
},false);
img.src = src;
}
function get(key){
//从本地缓存获取图片并且渲染
var srcStr = localstorage.getItme(key);
var imgObj = document.createElement('img');
imgObj.src = srcStr;
document.body.appendChild(imgObj);

}

//过期控制
function set(key,v){
var curTime = new Date().getTime();
localstorage.setItem(key,JSON.stringify({data:v,time:curTime}));
}
function get(key,exp){
var data = localstorage.getItem(key);
var dataObj = JSON.parse(data);
if (new Date().getTime() - dataObj.time>exp){
console.log("experies");
}else{
console.log("data="+dataObj.data);
}
}

//如何实现跨域共享客户端缓存

//如何做到真正的离线访问web应用？

//如何实现一个客户端的数据库？