[轉]HTML5離線存儲和本地緩存

時間 2019-11-05

標籤 html5 html 離線存儲本地緩存欄目 HTML5 简体版

原文原文鏈接

一.離線存儲

有一個web應用有三個文件index.html,a.js,b.css，如今須要把js和css文件緩存起來html

1.在index.html里加上<html manifest="test.manifest">web

2.manifest清單格式以下chrome

CACHE MANIFEST
#上面一句必須
#v1.0.0
#須要緩存的文件
CACHE:
a.js
b.css
#不須要緩存的文件
NETWORK:
*
#沒法訪問頁面
FALLBACK:
404.html

3.manifest文件的mime-type必須是 text/cache-manifest類型瀏覽器

注意點：

　　1.對於每一個index.html?id=1或index.html?id=2都會分別緩存index.html頁面，能夠經過chrome瀏覽器Resources/Application Cache觀察緩存

　　2.若是想更新緩存內容，只要修改下manifest文件便可，如改版本號v1.0.1app

3.離線存儲若是資源有更新，能夠經過以下代碼來監聽，但第一次加載還會是原來的版本code

window.applicationCache.addEventListener('updateready',function(e){
    if(window.applicationCache.status == window.applicationCache.UPDATEREADY){
        window.applicationCache.swapCache();
        
        if(confirm("loding new?")){
            window.location.reload()
        }
    }
},false)

二.本地緩存

localStorage.setItem("key","value")

localStorage.getItem("key","value")

localStorage.removeItem("key")

localStorage.clear()

1.本地存儲永不過時，除非本身去清除

2.能夠經過chrome瀏覽器Resources/Local Storage來查看

3.不一樣域下就算key相同取不到的值也不一樣，如localhost和127.0.0.1

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。