溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“HTML5存儲方式有哪些”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“HTML5存儲方式有哪些”這篇文章吧。
本文主要和大家分享HTML5存儲方式小結，希望能幫助HTML5開發者，也希望能幫助到大家更好的掌握HTML5存儲方式。
Cookies的野蠻生長
本地存儲localstorage
本地存儲sessionstorage
離線緩存（application cache）
Web SQL
IndexedDB
在HTML5出現之前，Cookies便占據了客戶端存儲的整個江山，就像是蠻荒時代的野蠻生長，cookies很好、快速地滿足實際應用的需求。但是它的問題也很明顯，cookies會在請求頭上帶著數據，而且大小限制在4K以內，這是非常不安全的，容易被外部截取，還存在domain污染。
IE瀏覽器特別喜歡搞自己的一套，對于增加存儲容量加入了UserData，大小是64K，但是其他瀏覽器不喜歡跟它玩，也就只有它自己一家支持。
那么，重點來了。既然cookies問題那么多，就要想辦法解決，不然沒法繼續往前發展。首先要確認它的問題有哪些，然后根據這些問題尋找解決方案。
解決4K存儲容量問題
解決請求頭帶有存儲信息的問題，也就是增加安全性，通過加密通道或方式進行數據存儲和傳輸
解決關系型存儲的問題
跨瀏覽器
存儲方式
以鍵值對（key-value）的方式存儲，永久存儲，永不失效，除非手動刪除。
存儲容量
每個域名5M。
常用的API
getItem //取記錄
setItem //設置記錄
removeItem //移除記錄
key //取key所對應的值
clear //清除記錄
HTML5的本地存儲API中的localstorage與sessionstorage在使用方法上是相同的，區別在于sessionstorage在關閉頁面后即被清空，而localstorage則會一直保存，除非手動刪除。
本地緩存應用所需的文件
使用方法
1、配置manifest文件
頁面上：
<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>
manifest文件：
manifest是最簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。
manifest文件分為三個部分：
CACHE MANIFEST-在此標題下列出的文件將在首次下載后進行緩存
NETWOrK-在此標題下的文件需要與服務器進行連接，且不會被緩存
FALLBACK-在此標題下的文件規定當頁面無法被訪問時的回退頁面（比如404頁面）
完整demo
CACHE MANIFEST # 2016-07-24 v1.0.0 /theme.css /main.js NETWORK: login.jsp FALLBACK: /html/ /offline.html
服務器上：manifest文件需要配置正確的MIME-type，即text/cache-manifest。
常用API
核心是applicationCache對象，有個status屬性，表示應用緩存的當前狀態：
0 （UNCACHED）：無緩存，沒有和頁面相關的應用緩存
1 （IDLE）：閑置，應用緩存沒有得到更新
2 （CHECKING）：檢查中，正在下載描述文件并檢查更新
3 （DOWNLOADING）：下載中，應用緩存正在下載與描述文件中指定的資源
4 （UPDATEREADY）：更新完成，所有資源都已經下載完畢
5 （IDLE）：廢棄，應用緩存的描述文件已經不存在了，因此頁面無法再訪問應用緩存
相關事件
表示應用緩存狀態的改變：
checking：在瀏覽器為應用緩存查找更新時觸發
error：在檢查更新或下載資源期間發生錯誤時觸發
noupdate：在檢查描述文件發現文件無變化時觸發
downloading：在開始下載應用緩存資源時觸發
progress：在文件下載應用緩存的過程中持續不斷地下載時觸發
updateready：在頁面新的應用緩存下載完畢時觸發
cached：在應用緩存完整可用時觸發
application cache的三個優勢：
離線瀏覽
提升頁面載入速度
降低服務器壓力
注意事項：
瀏覽器對緩存數據的容量限制可能不太一樣（某些瀏覽器設置的限制是每個站點5M）
如果是manifest文件，或者內部列舉的某一個文件不能正常下載，整個更新過程將視為失敗，瀏覽器繼續全部使用舊的緩存
引用manifest的html必須與manifest文件同源，在同一個域下
瀏覽器會自動緩存引用manifest文件的html文件，這就導致了如果更改了html內容，也需要更新版本才能做到最新
manifest文件中的CACHE與NETWOrK、FALLBACK的位置順序沒有關系，如果是隱式聲明需要在最前面
FALLBACK中的資源必須和manifest文件同源
更新完版本后，必須刷新一次才會啟動新版本（會出現重刷一次頁面的情況），需要添加監聽版本事件
站點中的其他頁面即使沒有設置manifest屬性，請求的資源如果在緩存中也從緩存中訪問
當manifest文件發生改變時，資源請求本身也會觸發更新
離線緩存和傳統瀏覽器緩存的區別
離線緩存是針對整個應用，瀏覽器緩存是單個文件
離線緩存可以主動通知瀏覽器更新資源
Web SQL數據庫API并不是HTML5規范的一部分，但它是一個獨立的規范，引入了一組使用SQL操作客戶端數據庫的APIs。
核心方法
openDatabase：使用現有的數據庫或新建的數據庫創建一個數據庫對象
transaction： 控制一個事務，以及基于這種情況執行提交或回滾
executeSql：用于執行實際的SQL查詢
打開數據庫
var db = openDatabase('mydb', '1.0', 'TEST DB', 2 * 1024 * 1024, fn);執行查詢操作
var db = openDatabase('mydb', '1.0', 'TEST DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
})插入數據
注：博客主題里的代碼塊樣式
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
});注：需要實現的代碼塊樣式，這個是 markdowpad2 里的操作，也是很多markdown寫作工具提供的操作，只需要按一下 tab 鍵，非常方便
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
});讀取數據
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM WIN', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>查詢記錄條數: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
alert(results.rows.item(i).name );
}
}, null);
});索引數據庫（IndexedDB）API（作為HTML5的一部分）對創建具有豐富本地存儲數據的數據密集型的離線HTML5 Web應用程序很有用，同時它還有助于本地緩存數據，使傳統在線Web應用程序（比如移動Web應用程序）能夠快速的運行和響應。
異步API
在IndexedDB大部分操作并不是我們常用的調用方法（返回結果的模式），而是（請求-響應模式），比如打開數據庫的操作。
以上是“HTML5存儲方式有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
