html5本地緩存
html5離線存儲緩存列表可以動態生成
最簡單來說，一個離線網路應用程序就是一個URL的列表——HTML，CSS，JavaScript，圖片，或者其他類型的資源。離線網路應用程序的主要指向一個叫做名單文件並用於定位網路伺服器上的資源列表。用於執行HTML5離線以用程序的網路瀏覽器將從名單文件中讀取URL列表，下載這些資源，將他們在本地緩存，並自動在這些本地副本改變時保持他們更新。當你嘗試在沒有網路連接時訪問網路應用程序，你的網路瀏覽器將自動切換並使用本地代替。
最新的主流的瀏覽器中都已添加了對HTML5的offlineStorage功能的支持，HTML5離線存儲功能非常強大，它的作用是：在用戶沒有與網際網路連接時，照樣可以訪問站點或應用，在用戶與網際網路連接時，自動更新緩存數據，是我們的網站的適應性和應用型更強！
例如一些在線游戲的某些文件可以使用離線存儲緩存到本地，這樣就不用每次刷新頁面都要下載了。對於傳統的瀏覽器緩存是無法控制的，瀏覽器有自己的緩存規則，我們無法實現緩存什麼不緩存什麼。但是使用離線存儲可以緩存任何內容，包括可以自定義哪些可以被緩存，哪些必須聯網才能訪問。
離線存儲所保存的不是應用中的某些數據，而是站點的某個些文件的副本，即html頁面或圖片等，而不是僅僅存儲一段json或xml。
⑵ html5用什麼資料庫HTML5資料庫
HTML5的5種存儲方式詳解
介紹
本文主要介紹了前端HTML5的幾種存儲方式的總結，包括localstorage、localstoragesessionstorage、offlinecache、Websql和IndexedDB。有興趣的可以了解一下。
開始正文~
在h5之前，cookies主要用於存儲。Cookies的缺點是在請求頭中攜帶數據，大小在4k以內。主要領域污染。
主要應用:購物車，客戶登錄
有IE瀏覽器的UserData，64k大小，只支持IE瀏覽器。
目標
存儲模式:
存儲為鍵值對，永久存儲，除非手動刪除，否則永遠不會失效。
尺寸:
每個域名500萬英鎊
支持情況:
注意:IE9localStorage不支持本地文件。你需要把項目發送到伺服器才能支持！
常用的API:
GetItem//獲取記錄
SetIten//創紀錄
RemoveItem//刪除記錄
Key//取Key對應的值
清除//清除記錄
存儲的內容:
數組，圖片，json，樣式，腳本。。。(任何可以序列化為字元串的內容都可以存儲)
HTML5的localStorageAPI中localStorage的用法與sessionStorage相同。不同之處在於，在頁面關閉後，sessionStorage被清除空，而localstorage將始終被保存。
本地緩存應用程序所需的文件
用法:
①配置清單文件。
第頁:
清單文件:
清單文件是一個簡單的文本文件，它告訴瀏覽器緩存了什麼(以及沒有緩存什麼)。
清單文件可以分為三個部分:
①緩存清單-該標題下列出的文件將在第一次下載後被緩存。
②網路-此標題下列出的文件需要連接到伺服器，不會被緩存。
③回退-該標題下列出的文件指定了無法訪問頁面時的回退頁面(如404頁)。
完整演示:
在伺服器上:清單文件需要配置正確的MIME類型，即「text/cache-manifest」。
比如Tomcat:
常用的API:
核心是applicationCache對象，它有一個status屬性，指示應用程序緩存的當前狀態:
0(未緩存):無緩存，即沒有與頁面相關的應用程序緩存。
1(空閑):空閑，即應用程序緩存沒有更新。
2(檢查):檢查，即下載描述文件並檢查更新。
3(下載):下載，即應用緩存正在下載描述文件中指定的資源。
4(UPDATEREADY):更新完成，所有資源都已下載。
5(空閑):廢棄，即應用程序緩存的描述文件不再存在，因此頁面無法再訪問應用程序緩存。
相關事件:
指示應用程序緩存狀態的更改:
檢查:當瀏覽器尋找應用程序緩存的更新時觸發。
Error:在檢查更新或下載資源期間發送錯誤時觸發。
Noupdate:檢查描述文件，沒有發現變化時觸發。
下載:開始下載應用緩存資源時觸發。
進度:文件下載應用緩存過程中連續下載觸發。
Update:當頁面的新應用緩存被下載時觸發。
緩存:當應用程序緩存完全可用時觸發。
應用程序緩存的三大優勢:
①離線瀏覽
②提高頁面載入速度。
③減輕伺服器壓力。
注意事項:
1.瀏覽器可能對緩存數據有不同的容量限制(有些瀏覽器為每個站點設置了5MB的限制)
2.如果清單文件，或者內部列出的某個文件無法正常下載，整個更新過程將被視為失敗，瀏覽器將繼續使用所有舊的緩存。
3.引用清單的html必須與清單文件相同，在同一域下。
4.瀏覽器將自動緩存引用清單文件的HTML文件，如果HTML內容發生更改，則需要更新版本。
6.回退中的資源必須與清單文件相同。
7.更新版本後，在開始新版本前必須刷新一次(頁面會再刷一次)。您需要添加監控版本的事件。
8.如果請求的資源在緩存中，即使沒有設置manifest屬性，也可以從緩存中訪問站點中的其他頁面。
9.當清單文件改變時，資源請求本身也將觸發更新。
離線緩存和傳統瀏覽器緩存的區別:
1.離線緩存是針對整個應用的，瀏覽器緩存是單個文件。
2.當離線緩存斷開時，頁面仍然可以打開，但瀏覽器緩存不能。
3.離線緩存可以主動通知瀏覽器更新資源。
關系資料庫，通過SQL語句訪問
web資料庫API不是HTML5規范的一部分，但它是一個獨立的規范，它引入了一組使用SQL操作客戶端資料庫的API。
支持情況:
SQL資料庫可以在最新版本的Safari、Chrome和Opera瀏覽器中工作。
核心方法:
①openDatabase:該方法使用現有資料庫或新創建的資料庫創建一個資料庫對象。
②事務:這種方法使我們能夠控制一個事務，並根據這種情況執行提交或回滾。
③executeSql:該方法用於執行實際的Sql查詢。
打開資料庫:
執行查詢操作:
插入數據:
讀取數據:
從這些操作可以看出，SQL語句基本上都是用於資料庫相關的操作。如果你懂MySQL，這個應該比較好用。
IndexedDB)API(作為HTML5的一部分)對於創建具有豐富本地存儲數據的數據密集型離線HTML5Web應用程序非常有用。同時，它也有助於在本地緩存數據，以便傳統的在線Web應用程序(如移動Web應用程序)能夠更快地運行和響應。
非同步API:
在IndexedDB中，大部分操作都不是我們常見的調用方法，返回結果的模式，而是請求-響應的模式，比如打開一個資料庫的操作。
這樣，當我們打開資料庫時，我們實際上返回了一個DB對象，這個對象就在結果中。從上圖可以看出，除了結果。還有幾個重要的屬性，比如onerror、onsuccess、onupgradeneeded(當我們請求打開的資料庫版本號與現有資料庫版本號不一致時調用)。這類似於我們的ajax請求。在我們發起這個請求之後，我們不確定它什麼時候會成功，所以我們需要在回調中處理一些邏輯。
關閉並刪除:
數據存儲:
indexedDB中沒有表的概念，但有objectStore。一個資料庫可以包含多個對象存儲。ObjectStore是一種靈活的數據結構，可以存儲各種類型的數據。也就是說，objectStore相當於一個表，其中存儲的每條數據都與一個鍵相關聯。
我們可以使用每個記錄中的指定欄位作為鍵(keyPath)，或者使用自動生成的增量數作為鍵(keyGenerator)，或者不指定它。選擇了不同類型的鍵，objectStore可以存儲的數據結構也是如此。
學習從來不是一個人的事。你應該有一個互相監督的夥伴。想學習或者交流前端問題的小夥伴可以私信「學習」小明獲取web前端入門資料，共同學習成長！
iH5資料庫怎麼做？
iH5是一款HTML5設計工具，能夠設計製作出PPT、應用原型、數字賀卡、相冊、簡歷、函、廣告視頻等多種類型的交互內容。
一、注冊後開始製作
對於剛開始使用iH5的用戶來說，首先是注冊一個賬戶，才能登陸官網平台進行相關的操作。這個比較簡單，用戶可以自行去注冊。
二、關於V幣
細心的用戶會留意到，某些模板上是沒有顯示【限時免費】，而是顯示類似1V幣的字樣，是因為某些更為驚艷的模板是設計師精心設計而成，因此想要使用這類更為驚艷的模板需要支付一定的V幣。想要充值V幣，可以點擊右上角個人主頁欄目的小箭頭，在窗口中點擊充值即可對賬戶進行V幣充值。
三、作品預覽、發布及分享
在完成H5作品創作後，點擊預覽按鈕，就可以對H5進行預覽了。發布作品只需點擊【發布】按鈕，在彈出的窗口填寫好相應的信息，即可完成作品發布。
在發布成功後，可把作品分享給朋友。我們返回個人主頁，選擇【已發布】，進入已發布的作品欄目，將滑鼠移至作品處，點擊右上角的分享按鈕，在彈出的窗口復製作品鏈接、保存作品二維碼，再把鏈接或者二維碼分享給朋友即可。
js+html5操作sqlite資料庫的方法？
建立資料庫
db=openDatabase('MyData','','MyDatabase',102400);
執行sql語句
db.transaction(function(tx){
tx.executeSql('sql語句',);}
想用HTML5來寫前台調用後台mysql資料庫請問該怎麼寫？
你需要使用中間服務層來與資料庫對接，比如Java，PHP，node.js等等語言與資料庫交互。html5本身是沒辦法直連資料庫。
⑶ HTML5應用程序緩存Application Cache詳解
什麼是Application Cache
HTML5引入了應用程序緩存技術，意味著web應用可進行緩存，並在沒有網路的情況下使用，通過創建cache manifest文件，可以輕松的創建離線應用。
Application Cache帶來的三個優勢是：
① 離線瀏覽
② 提升頁面載入速度
③ 降低伺服器壓力
而且主要瀏覽器皆以支持Application Cache，就算不支持也不會對程序造成什麼影響
離線存儲技術
HTML5提出了兩大離線存儲技術：localstorage與Application Cache，兩者各有應用場景;傳統還有離線存儲技術為Cookie。
經過實踐我們任務localstorage應該存儲一些非關鍵性ajax數據，做錦上添花的事情;
Application Cache用於存儲靜態資源，緩銀仍然是干錦上添花的事情;
而cookie只能保存一小段文本(4096位元組);所以不能存儲大數據，這是cookie與上述緩存技術的差異之一，而因為HTTP是無狀態的，伺服器為了區分請求是否來源於同一個伺服器，需要一個標識字元串，而這個任務就是cookie完成的，這一段文本每次都會在伺服器與瀏覽器之間傳遞，以驗證用戶的許可權。
所以Application Cache的應用場景不一樣，所以使用也不一致。
Application Cache簡介
Application Cache的使用要做兩方面的工作：
① 伺服器端需要維護一個manifest清單
② 瀏覽器上只需要一個簡單的設置即可
#p#副標題#e#
以例子做說明：
CACHE MANIFEST
CACHE:
# 需要緩存的列表
style1.css
1.jpg
01.js
NETWORK:
# 不需要緩存的
4.jpg
FALLBACK:
# 訪問緩存失敗後，備用訪問的資源，第一個是訪問源，第二個是替換文件*.html /offline.html
2.jpg/3.jpg
復制代碼
首先我這里報了一個錯：
Application Cache Error event: Manifest fetch failed (404)
這個錯誤的原因是：manifest 文件需要配置正確的 MIME-type，即 「text/cache-manifest」。必須在 web 伺服器上進行配置，不同的伺服器不一樣
APPLICATIONCACHE
01.js
02.js
1.jpg
2.jpg
3.jpg
4.jpg
demo.appcache
index.html
style1.css
style2.css
web.config
zepto.js
這樣一來便可以離線應用了，這個時候就算斷網了，那些文件依舊能訪問
這里有一點值得注意，比如這里不帶/index.html他會將「applicationcache/」緩存，其實這個就是index.html
manifest 文件可薯哪槐分為三個部分：
CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存
NETWORK - 在此標題下列出的文件需要與伺服器的連數友接，且不會被緩存
FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面(比如 404 頁面)
如圖所示，HTML5定義了幾個事件點，但是我們一般不會主動使用js去操作什麼，大多數情況下，我們完全依賴瀏覽器的處理即可。
#p#副標題#e#
尺寸限制
Application Cache的尺寸限制統一在5M，我這里做一個測試：
如所示，兩個css文件依舊超過了5M這個時候
Document was loaded from Application Cache with manifest
index.html:1 Application Cache Checking event
index.html:6 GET
index.html:1 Application Cache NoUpdate event
index.html:11 GET
index.html:12 GET
如所示，style2已經不能緩存了，這個會造成什麼問題呢?
比如我A頻道維護了自己的Application Cache，B頻道也維護了自己的，這個時候A頻道如果使用達到了一個峰值，會導致B頻道所有的緩存失效，所以：
建議Application Cache，存儲公共資源，不要存儲業務資源
一些問題
由更新機制來說，首次更新manifest時，因為頁面載入已經開始甚至已經完成，緩存更新尚未完成，瀏覽器仍然會使用過期的資源;瀏覽器是當Application Cache有更新時，該次不會使用新資源，第二次才會使用。這個時候update事件中執行window.reload事件。
window.applicationCache.addEventListener(updateready, function(){
window.location.reload()
});
由上例可以知道，緩存的不只是顯示定義的文件，比如上例中的applicationcache/時便會默認保存index.html為映射的數據，並且包含demo.appcache文件，很多時候會遇到一次文件更新線上老是不更新，這個時候隨便在manifest配置文件中做一點修改即可更新。
從可用性與易用性來說，Application Cache是值得使用的，但是最好是做靜態資源的緩存，真正要實現離線應用還得花更多的功夫呢!
⑷ html5的離線web應用的瀏覽器和伺服器交互的過程要是沒有緩存怎麼辦
html5的離線web應用的瀏覽器和伺服器交互的過程要是沒有緩存就需要每次交互都要實時介面調用，增加網路開銷。
一、離線存儲的作用
1、用戶可離線訪問應用，這對於無法隨時保持聯網狀態的移動終端用戶來說尤其重要
2、用戶訪問本地的緩存文件，通常意味著更快的訪問速度
3、僅僅載入被修改過的資源，避免同一資源對伺服器多次的請求，大大降低了對伺服器的訪問壓力
二、實現離線存儲
1、在html標簽里通過manifest屬性引用一個cache.manifest文件，該文件里聲明了瀏覽器需緩存的所有資源文件，如下所示：
<!DOCTYPE html>
<html lang='cn' manifest='cache.manifest'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>離線緩存示例頁面</title>
<!-- CSS文件引用 -->
</head>
<body>
<!-- 各種標簽 -->
</body>
<!-- 各種腳本文件 -->
</html>
2、關於cache.manifest的定義
CACHE MANIFEST
# 注釋：需要緩存的文件，無論在線與否，均從緩存里讀取
chched.js
cached.css
# 注釋：不緩存的文件，無論緩存中存在與否，均從新獲取
NETWORK:
uncached.js
uncached.css
# 注釋：獲取不到資源時的備選路徑，如index.html訪問失敗，則返回404頁面
FALLBACK:
index.html 404.html
⑸ html5 應用程序緩存和瀏覽器緩存有什麼區別
應用程序緩存是會預載入的，保證齊全地供應和保存。瀏覽器緩存沒有這些控制，不能作為程序緩存使用。不幸地，應用程序緩存過於簡單，導致效率不彰，預期將會被 Service Worker 取代。
⑹ 如何使用下面的HTML5功能創建離線的網頁和應用程序
在這篇文章中，我們將展示如何創建乖巧離線的網頁和應用程序使用下面的HTML5功能：
AppCache本地存儲文件資源，離線訪問它們作為URL
索引型資料庫存儲結構化數據在本地，你可以訪問和查詢它
DOM存儲在本地存儲少量的文字信息，
離線事件來檢測，如果你€ 重新連接到網路
離線的'蛋糕'這個詞使用的食譜網站的搜索結果。
作為一個開發者，你可以使這些類型的場景相結合的離線技術：AppCache，索引型資料庫，DOM存儲，WebSockets的（或XHR）。在探索個人的技術，讓我們的探討的好處。
Metro風格的應用程序和網站，離線技術讓你來處理連接故障。想像一下，您的用戶填寫一個表格，他失去網路連接。您的網站或Metro風格的應用程序應該怎麼做呢？連接自由發展的心態可以讓您的應用程序是否連接到網路或不正確地獨立工作。你的應用程序將正常工作。
在更復雜的情況下，Web站點和應用程序允許用戶創建新的內容，並存儲新的數據，即使應用程序是完全離線。試想一下，無縫地工作在離線狀態下，如Outlook今天的Outlook Web Access（OWA）的Hotmail或GMail。
離線技術也可以通過本地緩存的資源服務，預緩存將來信息和轉移從雲（或網路）到客戶端設備的處理能力，提高整體性能。信息越多，你€™重新能夠緩存在本地，在本地搜索，並計算在本地伺服器和用戶的體驗將更快，需要更少的資源熱轉印機。
有一個Metro風格的應用程序離線工作的期望高於網站的離線工作。因為他們使用從商店的自我包含的程序包部署，用戶希望他們有某種類型的離線功能（如游戲，書籍，食譜等）。即使這些應用程序是無法創建或訪問新的內容，以前的內容應該是可見的（例如聯系人，會議，飼料，雜志等）。
本地緩存文件資源使用AppCache
AppCache使您能夠創建長壽命的本地緩存下載的文件資源，資源可以訪問而離線或使用的同時在線，以提高性能。試想一下，一個三歲的孩子使用一台筆記本電腦，下載一個互動式的Web的游戲（KidsBook）從您的家庭網路。如果應用程序的資源存儲在本地，孩子可以繼續在車上玩游戲，那裡沒有網路連接。
如果KidsBook使用AppCache，本場比賽將有緩存必要的資源（的JavaScript，HTML，CSS，音頻，視頻等）時，先下載後從網路上斷開時，播放的游戲。這可以讓孩子保持愉悅，即使設備本身沒有網路連接。
AppCache創作流程。
要看到如何啟用互動網頁游戲離線工作，檢查出KidsBook的IE Test Drive網站上的例子。
AppCache使用一個manifest文件，以緩存的內容從網站上指定資源的URI。幕後發生後，瀏覽器顯示網頁，它允許在清單文件中定義的資源被下載的緩存。這保證了資源下載到本地機器上，作為一個單位在一個事務中，創建一個本地的緩存。如果一個單一的資源下載失敗，沒有創建高速緩存。要更新存儲在緩存中的內容，在您的伺服器更新清單文件。當用戶下次訪問該網站時，瀏覽器比較明顯的伺服器上的文件的緩存副本。如果緩存的艙單副本是不同的伺服器副本，新版本更新清單文件中定義的內容高速緩存的使用。
AppCache還允許Internet Explorer和Metro風格的應用程序在離線狀態下使用傳統的URL的訪問緩存的資源。這可以讓你在瀏覽器窗口中鍵入一個URL，並沒有任何網路連接的情況下訪問此信息。此外，離線頁可以解決的URI使用本地緩存的信息。代碼示例來看看在HTML5應用程序緩存（「œAppCacheâ）部分中的IE10開發人員指南。
總體而言，AppCache提供了一定的優勢HTTP的緩存。HTTP緩存沒有噸保證緩存的資源之後將TIF（臨時Internet文件）將被清除。此外，HTTP緩存沒有€™噸正確地解決在離線狀態下的URL。然而，HTTP緩存可用於優化AppCache的行為，通過指定的緩存資源的生命周期。如果從網站上下載或復制的資源從緩存的本地高速緩存中創建一個新的版本時，這將決定。
Metro風格的應用可以受益於AppCache通過在本地緩存的Web資源的訪問的頁框，它允許離線訪問的內容。
高速緩存大型本地使用索引型資料庫的結構化數據
索引型資料庫是一個本地JavaScript對象存儲在本地機器上的資料庫，允許快速索引和搜索的對象。前面介紹的食譜網站，包括16食譜從父站點中提取的資料庫。想像一下，用一個RSS feed，一個WebSocket或XHR連接的，定期更新這個資料庫。這將使您的用戶能夠訪問到最新的食譜，即使他們有沒有網路連接。
索引型資料庫，您可以直接操作和索引的JavaScript對象。使用索引型資料庫搜索本地信息的優點是它不會強迫你總是在雲中搜索，降低了計算成本。這是假設你€™重新能夠維持，是緩存在本地系統中的數據的相關性。
⑺ HTML5應用程序緩存和HTML瀏覽器緩存有什麼區別
新的HTML5規范允許瀏覽器在連接客戶端時預取一些或全部網站資產，如HTML文件、圖像、CSS、JavaScript等。對於獲取此內容，用戶以前沒有必要訪問此內容。換句話說，應用程序緩存可以預取完全未被訪問的頁面，從而在常規瀏覽器緩存中不可用。預取文件可以加速站點的性能，盡管您最初使用帶寬下載這些文件。