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 服務器上進行配置，不一樣的服務器不同