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

时间 2019-12-08

标签 html5 html 三种存储方式以及区别栏目 HTML5 繁體版

原文原文链接

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

一、本地存储localStorage和sessionStorage

介绍：html

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

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

　　localStorage（不设置时间戳，不会过时）数据库

　　sessionStorage（关闭浏览器消失）canvas

经常使用方法：跨域

　　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中

二、本地数据库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);
       }

三、离线存储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 服务器上进行配置，不一样的服务器不同