html5離線存儲實例
一.離線存儲
有一個web應用有三個文件index.html,a.js,b.css，現在需要把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類型
注意點：
1.對於每個index.html?id=1或index.html?id=2都會分別緩存index.html頁面，可以通過chrome瀏覽器Resources/Application Cache觀察
2.如果想更新緩存內容，只要修改下manifest文件即可，如改版本號v1.0.1
4.離線存儲如果資源有更新，可以通過如下代碼來監聽，但第一次載入還會是原來的版本
復制代碼
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
② 什麼是html5的是離線存儲
Html5引入了應用程序緩存，這意味著 web 應用可進行緩存，並可在沒有網際網路連接時進行訪問。 應用程序緩存為應用帶來三個優勢：
離線瀏覽 – 用戶可在應用離線時使用它們
速度 – 已緩存資源載入得更快
減少伺服器負載 – 瀏覽器將只從伺服器下載更新過或更改過的資源。
③ html5 的離線儲存方式有哪些
localStorage - 永久存儲
sessionStorage -關閉頁面消失
還可以創建本地資料庫 -沒研究過
④ html5離線存儲有幾種方式
h5之前，存儲主要是用cookies。cookies缺點有在請求頭上帶著數據，大小是4k之內。主Domain污染。
目標
解決4k的大小問題
解決請求頭常帶存儲信息的問題
解決關系型存儲的問題
跨瀏覽器
1.本地存儲localstorage
存儲方式：
以鍵值對(Key-Value)的方式存儲，永久存儲，永不失效，除非手動刪除。
大小：
每個域名5M
⑤ HTML5的離線存儲功能如何使用
所有的名單文件被分為三個部分：「explicit」段，「fallback」 段，和「online
whitelist」段。每個部分有一個標頭，單獨佔一行。如果名單文件不含有任何段落標頭，所有列出的資源默認為「explicit」段。盡量不要細想這些術語，以免你崩潰。
這兒是一個有效的名單文件。它列出了三個資源：一個CSS文件，一個JavaScript文件，和一個JPEG圖片。
CACHE MANIFEST
/clock.css
/clock.js
/clock-face.jpg
此緩存名單文件沒有任何段落頭，所以所有列出的資源默認為「explicit」段。在「explicit」段中的資源將會被下載並在本地緩存，且會在你沒有網路連接時用於代替它們的在線副本。因此，在下載此名單列表的同時，你的瀏覽器將會從你網路伺服器的根目錄下載clock.css，clock.js和clock-face.jpg。然後你可以拔掉你的網線並刷新頁面，所有這些資源可以在離線時有效。
⑥ THINKPHP 關於html5離線存儲怎麼搞
什麼是離線網路應用程序?乍一看，從以下幾個方面來說就像一個矛盾。網頁是需下載並呈現的。下載意味著網路連接。你怎能在離線的時候下載?當然，你不能。但你可以在你在線的時候下載。這就是HTML5離線應用程序怎樣工作的。
最簡單來說，一個離線網路應用程序就是一個URL的列表——HTML，CSS，JavaScript，圖片，或者其他類型的資源。離線網路應用程序的注意指向一個叫做名單文件並用於定位網路伺服器上任何文本文件的列表。用於執行HTML5離線以用程序的網路瀏覽器將從名單文件中讀取URL列表，下載這些資源，將他們在本地緩存，並自動在這些本地副本改變時保持他們更新。當你嘗試在沒有網路連接時訪問網路應用程序，你的網路瀏覽器將自動切換並使用本地代替。
從現在開始，大多數的工作要靠你網路開發者了。DOM里有一個標記會告訴你在線還是離線。當你的離線狀態改變時將會有事件觸發(一時離線，下一時在線，或者反之亦然)。但這非常符合情況。如果你的應用程序創建了數據或者存儲狀態，你該決定當離線時在本地存儲數據，且當你重新在線時與遠程伺服器同步。更新程序在被創建時連接到存儲段。換句話說，HTML5可以使你的網路應用程序離線使用。當你處於那種情況該怎麼做由你決定。
⑦ HTML5的離線儲存怎麼使用，以及工作原理
原理：HTML5的離線存儲是基於一個新建的.appcache文件的，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之後當網路在處於離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。
方法：
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 離線存儲，有何不同
HTML5 提供了兩種在客戶端存儲數據的新方法：
localStorage - 沒有時間限制的數據存儲 (關閉瀏覽器依然存在）
sessionStorage - 針對一個 session 的數據存儲 （關閉瀏覽器後即清空）
之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲，因為它們由每個對伺服器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，數據不是由每個伺服器請求傳遞的，而是只有在請求時使用數據。它使在不影響網站性能的情況下存儲大量數據成為可能。
對於不同的網站，數據存儲於不同的區域，並且一個網站只能訪問其自身的數據。
HTML5 使用 JavaScript 來存儲和訪問數據。
⑨ HTML5的離線儲存怎麼使用
HTML5的離線存儲是基於一個新建的.appcache文件的，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之後當網路在處於離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。
方法：
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的離線儲存怎麼使用
很簡單，該功能是瀏覽器實現的。瀏覽器提供了一個在用戶機器上的存儲，也就是存在用戶機器上的。