HTML5的三种存储方式以及区别

首先讲存储方式前要先知道为什么要使用他：一是利用本地数据，介绍网络请求；二是弱网环境下，高延迟，低带宽，要把数据本地化；

 

1、本地存储localStorage和sessionStorage

介绍：

　　存储大小：5m，cookie只有4k，浏览器兼容性非常好，ie8以上都支持，ios无痕浏览失效； 

　　这个是浏览器兼容查询网站:http://caniuse.com/ 

　　localStorage（不设置时间戳，不会过期）

　　sessionStorage（关闭浏览器消失）

常用方法：

　　localStorage.setItem(‘key’,’val’)   存数据

　　localStorage.getItem(‘key’)  取数据

　　localStorage.removeItem(‘key’)  移除数据

　　localStorage.key(0)  索引

　　localStorage.clear()  清空所有数据

使用注意事项：

　　1.先判断浏览器是否支持

　　2.写数据，需要异常处理，避免超出5m容量导致的报错

　　3.避免把敏感信息存入localStorage

　　4.key是有唯一性的

　　5.会跨域

　　6.子域名之间不能共享数据

特殊-图片储存： 
　　1.创建 canvas 
　　2.drawImage 这张图片 
　　3.toDataURL 把图片转换为dataurl 
　　4.储存在localStorage中

2、本地数据库indexedDB

介绍：

　　适用于存储大量结构化数据

　　浏览器兼容性比较差，ie10以上都支持，安全性较高

基本操作：

        //创建数据库
        function openDB (name) {
            var request=window.indexedDB.open(name);
            request.onerror=function(e){
                console.log('OPen Error!');
            };
            request.onsuccess=function(e){
                myDB.db=e.target.result;
            };
        }

        var myDB={
            name:'test',
            version:1,
            db:null
        };
        openDB(myDB.name);


       //关闭数据库
       function closeDB(db){
            db.close();
       }

       //删除数据库
       function deleteDB(name){
            indexedDB.deleteDatabase(name);
       }

3、离线存储application cache

介绍：

　　浏览器兼容性一般，ie10以上都支持

　　适用于更改少的单页面，可用户无网络情况下显示页面

　　更新机制不是很好，一般要刷新一次才能更新

使用步骤：

　　1.头部加manifest清单

<html  manifest="demo.appcache">

　　2.清单内容如下：

CACHE MANIFEST

CACHE:
# 需要缓存的列表
style1.css
1.jpg
01.js
http://localhost/applicationcache/02.js
http://localhost/applicationcache/zepto.js

NETWORK:
# 不需要缓存的
4.jpg

FALLBACK:
# 访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件*.html /offline.html
2.jpg/3.jpg

　　3.manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置，不同的服务器不一样

posted @ 2017-08-17 13:48  MrLQZ  阅读(485)  评论(0)  编辑  收藏  举报