h5离线缓存+sessionstroage做 离线网页
生活随笔
收集整理的這篇文章主要介紹了
h5离线缓存+sessionstroage做 离线网页
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.h5離線緩存實現步驟：
a. 在html 標簽中添加manifest，例子：<html lang="en" manifest="cache.appcache">
b. 新建一個文件后綴為appcache，文件中存放要緩存的文件，及哪些需要在線請求的文件，該文件需要放在服務器上。
? ? ? ? 格式如下：
CACHE MANIFEST
????????#V1.1.24 ????? #存放需要緩存的文件名稱
????????bootstrap/css/bootstrap.css
????????css/index-pc.css
????????js/index.js
????????bootstrap/js/bootstrap.js
????????test.html c. 聲明manifest的mime類型，apache下可以在httpd.conf中加上AddType text/cache-manifest manifest ????????AddType text/cache-manifest .appcache2.sessionstroage,將接口數據緩存在sessionstroage中，需要注意的是json對象的存儲。將result這個json對象轉換為字符串存儲在緩存中。例子：goLibrary=JSON.stringify(result); ??????????sessionStorage.setItem('goLibrary',goLibrary);取緩存數據的時候，將字符串再轉換為對象。??????????goLibrary=sessionStorage.getItem('goLibrary'); ??????? ??goLibrary=JSON.parse(goLibrary);
注意事項： 1.一旦文件被緩存，則瀏覽器會繼續展示已緩存的版本，即使您修改了服務器上的文件。為了確保瀏覽器更新緩存，您需要更新 manifest 文件。 2.瀏覽器對緩存數據的容量限制可能不太一樣（某些瀏覽器設置的限制是每個站點 5MB）
????????#V1.1.24 ????? #存放需要緩存的文件名稱
????????bootstrap/css/bootstrap.css
????????css/index-pc.css
????????js/index.js
????????bootstrap/js/bootstrap.js
? ? ????NETWORK:? #使用星號來指示所有其他資源/文件都需要因特網連接
* FALLBACK: ? ????????#無法建立因特網連接，則用 "offline.html" 替代 /html5/ 目錄中的所有文件????????test.html c. 聲明manifest的mime類型，apache下可以在httpd.conf中加上AddType text/cache-manifest manifest ????????AddType text/cache-manifest .appcache2.sessionstroage,將接口數據緩存在sessionstroage中，需要注意的是json對象的存儲。將result這個json對象轉換為字符串存儲在緩存中。例子：goLibrary=JSON.stringify(result); ??????????sessionStorage.setItem('goLibrary',goLibrary);取緩存數據的時候，將字符串再轉換為對象。??????????goLibrary=sessionStorage.getItem('goLibrary'); ??????? ??goLibrary=JSON.parse(goLibrary);
注意事項： 1.一旦文件被緩存，則瀏覽器會繼續展示已緩存的版本，即使您修改了服務器上的文件。為了確保瀏覽器更新緩存，您需要更新 manifest 文件。 2.瀏覽器對緩存數據的容量限制可能不太一樣（某些瀏覽器設置的限制是每個站點 5MB）
總結
以上是生活随笔為你收集整理的h5离线缓存+sessionstroage做 离线网页的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： windows生成dump文件
- 下一篇： QXDM 安装