html之储存

1、html的存储的介质分类：

1.cache  通常我们把它叫做缓存，保存在内存里。
2.磁盘文件存储。
3.数据库存储。
4.内存存储。

2、cookies

h5之前都是用cookies进行存储的，利用cookie的存储特点：
    1.http请求头上会带着。
    2.大小为4k。
    3.主domain污染。    

3、目前的几种储存方式：

1.本地存储： localStorage  sessionStorage
2.离线缓存： application cache
3.数据库存储：indexedDB 和 WEB SQL

A.本地存储： localStorage  sessionStorage
    存储形式： key ---> value ;
    过期： localStorage  永久存储，永不失效，除非手动删除。
          sessionStorage 关闭浏览器，或者重新打开页面，就消失了。
    大小： 官方给出的文档是：每个域名可存储 5M。

4、localStorage 和 sessionStorage的讲解

1.以localStorage为例： 其属性包括以下：
    getItem（）； 获取，
    setItem（）； 设置，
    removeItem（）；移除，
    key（）；  key值，
    clear（）； 清除。

2.使用h5本地存储时注意事项：
    1）使用前判断浏览器是否支持。
    2）写数据时候， 需要异常处理，避免超出容量抛错（5M）；
    3）避免把敏感的信息存入 localStorage；
    4）key的唯一性。

3.以本地图片缓存为例，代码如下：
     var src ="1.jpg";

    function set(key){   // 此方法只能用于本地图片的路径
        var img = document.createElement("img");
        // 当图片加载完成的时候触发回调函数；
        img.addEventListener("load",function(){
            var imgCanvas =document.createElement("canvas");
            imgContext = imgCanvas.getContext("2d");
            // 确保canvas元素的大小和图片尺寸一致；
            imgCanvas.height = this.height;
            imgCanvas.width = this.width;
            // 渲染图片到canvas中；
            imgContext.drawImage(this,0,0,this.width,this.height);      
            // 用data url 的形式取出
            var imgAsDataUrl  = imgCanvas.toDataURL("image/png");
            // 保存到本地存储中；

            try{
                localStorage.setItem(key,imgAsDataUrl);
            }
            catch(e){
                console.log("Storage failed:"+e);
            }
        },false);
        img.src = src；
    }

    function get(key){  // 从本地缓存获取图片并且渲染
            var srcStr = localStorage.getItem(key);
            var imgObj = document.createElement("img");
            imgObj.src = srcStr ;
            document.body.appendChild(imgObj);
        }

    本地存储的使用场景：
        1.利用本地数据，减少网络传输。
        2.弱网络环境下，高延迟，低宽度，尽量把数据本地化。

4.本地存储的过期控制，代码如下：   
    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("expires");
        } else{
            console.log("data="+dataObj.data); 
        }
    }

5、indexedDB database

这是一种能在浏览器中持久化的存储结构化数据的数据库，并且为web应用提供了丰富的查询能力。

6、离线缓存：

1.它是可以让web应用在离线的情况下继续使用，通过manifest文件指明需要缓存的资源。
2.检查是否在线： navigator.onLine      // true 在线， false 离线
3.使用方法：
    a.在html页面中引入manifest文件  
    b. 在服务器添加 mine-type text/cache-manifest;
4.优点： 
    1）完全离线。
    2）资源被缓存，加载更快。
    3）降低server负载。
5.不足：
    1）含有manifest属性的当前请求页面无论如何都会被缓存。
    2）更新是全局性的，无法单独更新某个文件。
    3）对于链接的参数变化是敏感的，任何一个参数的修改都会被重新缓存。
    4）更新需要建立在manifest文件的更新，文件更新后是需要页面再次刷新的。
6.使用场景：
    1）单地址的页面。
    2）对实时性要求不高的业务。
    3）离线webapp。