html之储存

来源：互联网发布：白云网络怎么样编辑：程序博客网时间：2024/06/06 14:05

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

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

2、cookies

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

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

1.本地存储： localStorage  sessionStorage2.离线缓存： application cache3.数据库存储：indexedDB 和 WEB SQLA.本地存储： 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文件 <html manifest="sample.appcache">     b. 在服务器添加 mine-type text/cache-manifest;4.优点：     1）完全离线。    2）资源被缓存，加载更快。    3）降低server负载。5.不足：    1）含有manifest属性的当前请求页面无论如何都会被缓存。    2）更新是全局性的，无法单独更新某个文件。    3）对于链接的参数变化是敏感的，任何一个参数的修改都会被重新缓存。    4）更新需要建立在manifest文件的更新，文件更新后是需要页面再次刷新的。6.使用场景：    1）单地址的页面。    2）对实时性要求不高的业务。    3）离线webapp。

0 0