html5離線存儲緩存列表可以動態(tài)生成嗎

html5離線存儲緩存列表可以動態(tài)生成

站在用戶的角度思考問題，與客戶深入溝通，找到雞冠網(wǎng)站設(shè)計與雞冠網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋雞冠地區(qū)。

最簡單來說，一個離線網(wǎng)絡(luò)應(yīng)用程序就是一個URL的列表——HTML，CSS，JavaScript，圖片，或者其他類型的資源。離線網(wǎng)絡(luò)應(yīng)用程序的主要指向一個叫做名單文件并用于定位網(wǎng)絡(luò)服務(wù)器上的資源列表。用于執(zhí)行HTML5離線以用程序的網(wǎng)絡(luò)瀏覽器將從名單文件中讀取URL列表，下載這些資源，將他們在本地緩存，并自動在這些本地副本改變時保持他們更新。當(dāng)你嘗試在沒有網(wǎng)絡(luò)連接時訪問網(wǎng)絡(luò)應(yīng)用程序，你的網(wǎng)絡(luò)瀏覽器將自動切換并使用本地代替。

最新的主流的瀏覽器中都已添加了對HTML5的offlineStorage功能的支持，HTML5離線存儲功能非常強(qiáng)大，它的作用是：在用戶沒有與因特網(wǎng)連接時，照樣可以訪問站點(diǎn)或應(yīng)用，在用戶與因特網(wǎng)連接時，自動更新緩存數(shù)據(jù)，是我們的網(wǎng)站的適應(yīng)性和應(yīng)用型更強(qiáng)！

例如一些在線游戲的某些文件可以使用離線存儲緩存到本地，這樣就不用每次刷新頁面都要下載了。對于傳統(tǒng)的瀏覽器緩存是無法控制的，瀏覽器有自己的緩存規(guī)則，我們無法實(shí)現(xiàn)緩存什么不緩存什么。但是使用離線存儲可以緩存任何內(nèi)容，包括可以自定義哪些可以被緩存，哪些必須聯(lián)網(wǎng)才能訪問。

離線存儲所保存的不是應(yīng)用中的某些數(shù)據(jù)，而是站點(diǎn)的某個些文件的副本，即html頁面或圖片等，而不是僅僅存儲一段json或xml。

HTML5 離線存儲，有何不同

HTML5 提供了兩種在客戶端存儲數(shù)據(jù)的新方法：

localStorage - 沒有時間限制的數(shù)據(jù)存儲 (關(guān)閉瀏覽器依然存在）

sessionStorage - 針對一個 session 的數(shù)據(jù)存儲 （關(guān)閉瀏覽器后即清空）

之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數(shù)據(jù)的存儲，因?yàn)樗鼈冇擅總€對服務(wù)器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，數(shù)據(jù)不是由每個服務(wù)器請求傳遞的，而是只有在請求時使用數(shù)據(jù)。它使在不影響網(wǎng)站性能的情況下存儲大量數(shù)據(jù)成為可能。

對于不同的網(wǎng)站，數(shù)據(jù)存儲于不同的區(qū)域，并且一個網(wǎng)站只能訪問其自身的數(shù)據(jù)。

HTML5 使用 JavaScript 來存儲和訪問數(shù)據(jù)。

HTML5游戲怎么離線

可以，方法我想是以保存網(wǎng)頁的形式（這里跟flash不一樣，flash可以跑在flash播放器上，而html5的游戲是用js編寫，一般都是跑著瀏覽器上），單機(jī)游戲可以離線玩離線的話直接打開你保存的網(wǎng)頁，注意保存網(wǎng)頁的時候是否將游戲的js文件、css文件、圖片等資源文件都保存下來了，不能像flash一樣打包，所以我覺得現(xiàn)在對于html5游戲來說沒有flash方便

在博客中只要能插入html5游戲的 html代碼、js代碼、以及引用的相關(guān)圖片應(yīng)該就可以了

HTML5的離線儲存怎么使用，以及工作原理

原理：HTML5的離線存儲是基于一個新建的.appcache文件的，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時，瀏覽器會通過被離線存儲的數(shù)據(jù)進(jìn)行頁面展示。

方法：

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

2.manifest清單格式如下：

CACHE MANIFEST

#上面一句必須

#v1.0.0

#需要緩存的文件

CACHE:

a.js

b.css

#不需要緩存的文件

NETWORK:

*

#無法訪問頁面

FALLBACK:

404.html

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

html5 離線緩存怎么實(shí)現(xiàn)的

HTML5離線存儲和本地緩存

一.離線存儲

有一個web應(yīng)用有三個文件index.html,a.js,b.css，現(xiàn)在需要把js和css文件緩存起來

1.在index.html里加上html?manifest="test.manifest"

2.manifest清單格式如下

CACHE?MANIFEST

#上面一句必須

#v1.0.0

#需要緩存的文件

CACHE:

a.js

b.css

#不需要緩存的文件

NETWORK:

*

#無法訪問頁面

FALLBACK:

404.html

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

注意點(diǎn)：

1.對于每個index.html?id=1或index.html?id=2都會分別緩存index.html頁面，可以通過chrome瀏覽器Resources/Application?Cache觀察

2.如果想更新緩存內(nèi)容，只要修改下manifest文件即可，如改版本號v1.0.1

　4.離線存儲如果資源有更新，可以通過如下代碼來監(jiān)聽，但第一次加載還會是原來的版本

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

android中怎么使用html5離線功能

HTML5的離線應(yīng)用功能可以使得WebApp即使在網(wǎng)絡(luò)斷開的情況下仍能正常使用這是個非常有用的功能,但如何使Webivew支持HTML5離線應(yīng)用功能呢,需要的朋友可以參考下

HTML5的離線應(yīng)用功能可以使得WebApp即使在網(wǎng)絡(luò)斷開的情況下仍能正常使用，這是個非常有用的功能。近來工作中也要用到HTML5離線應(yīng)用功能，由于是在Android平臺上做，所以自然而然的選擇Webview來解析網(wǎng)頁。但如何使Webivew支持HTML5離線應(yīng)用功能呢，經(jīng)過反復(fù)摸索和上網(wǎng)查找資料，反復(fù)做試驗(yàn)終于成功了。

首先需配置webview的的一些屬性，假設(shè)activity中已經(jīng)有了一個Webview的實(shí)例對象，名為m_webview，然后增加以下代碼：

復(fù)制代碼 代碼如下:

WebSettings webseting = m_webview.getSettings();

webseting.setDomStorageEnabled(true);

webseting.setAppCacheMaxSize(1024*1024*8);//設(shè)置緩沖大小，我設(shè)的是8M

String appCacheDir = this.getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath();

webseting.setAppCachePath(appCacheDir);

webseting.setAllowFileAccess(true);

webseting.setAppCacheEnabled(true);

webseting.setCacheMode(WebSettings.LOAD_DEFAULT);

webview可以設(shè)置一個WebChromeClient對象，在其onReachedMaxAppCacheSize函數(shù)對擴(kuò)充緩沖做出響應(yīng)。代碼如下

復(fù)制代碼 代碼如下:

m_webview.setWebChromeClient(m_chromeClient);

private WebChromeClient m_chromeClient = new WebChromeClient(){

//擴(kuò)充緩存的容量

@Override

public void onReachedMaxAppCacheSize(long spaceNeeded,

long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {

quotaUpdater.updateQuota(spaceNeeded * 2);

}

};

其次要修改http服務(wù)器中的配置，使其支持text/cache-manifest，我使用的是apache服務(wù)器，是windows版本的，在apache的conf文件夾中找到mime.types文件，打開后在文件的最后加上

“text/cache-manifest mf manifest”，重啟服務(wù)器即可。這一步很重要，我就是因?yàn)榉?wù)器端沒有配置這個，所以失敗了好多次，最后是在附錄鏈接1的回復(fù)中找到的線索。

經(jīng)過以上設(shè)置Webview就可以支持HTML5的離線應(yīng)用了。

附錄鏈接1中說緩沖目錄應(yīng)該是getApplicationContext().getCacheDir().getAbsolutePath();但我經(jīng)過試驗(yàn)后發(fā)現(xiàn)設(shè)置那個目錄不起作用，可能是Android版本不同吧，我的是Android4.0.3，而他的可能是以前的Android版本吧。

緩沖目錄使用getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath()是從附錄鏈接2中找到的線索。

當(dāng)前標(biāo)題：html5離線,html5離線存儲
鏈接URL：http://chinadenli.net/article1/dsgcsod.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、域名注冊、、Google、網(wǎng)站改版、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)