HTML5时代客户端存储技术详解-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

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

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应用？

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

转载于:https://my.oschina.net/jediKnight/blog/515276