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本身是沒辦法直連數據庫。