本篇文章給大家分享的是有關html5幾種在客戶端存儲數據的實例，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
HTML5引入應用緩存，意味著web應用可以進行緩存，即使在沒有網絡的情況下也能使用。
application cache有三個特點
離線瀏覽
已緩存的資源加載速度更快
減少服務器負載，瀏覽器將只從服務器下載更新過或更改過的資源
每個指定了 manifest 的頁面在用戶對其訪問時都會被緩存。如果未指定 manifest 屬性，則頁面不會被緩存（除非在 manifest 文件中直接指定了該頁面）。
manifest 文件的建議的文件擴展名是：".appcache"。
<!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html>
manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。
manifest 文件可分為三個部分：
CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存
NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存
FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）
一個完整的manifest文件
CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /404.html
HTML5 提供了兩種在客戶端存儲數據的新方法：
localStorage - 沒有時間限制的數據存儲
sessionStorage - 針對一個 session 的數據存儲
之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲，因為它們由每個對服務器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。
localStorage和sessionStorage都具有相同的操作方法，例如setItem()、getItem()和removeItem()等
localStorage和sessionStorage的方法：
setItem存儲value
用途：將value存儲到key字段
用法：.setItem( key, value)
代碼示例：
sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");getItem獲取value
用途：獲取指定key本地存儲的值
用法：.getItem(key)
代碼示例：
var value = sessionStorage.getItem("key");
var site = localStorage.getItem("site");removeItem刪除key
用途：刪除指定key本地存儲的值
用法：.removeItem(key)
代碼示例：
sessionStorage.removeItem("key");
localStorage.removeItem("site");clear清除所有的key/value
用途：清除所有的key/value
用法：.clear()
sessionStorage不是一種持久化存儲，瀏覽器關閉之后會隨之清除。而localStorage用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。
indexDB是一種輕量級NOSQL數據庫。相比web sql(sqlite)更加高效，包括索引、事務處理和健壯的查詢功能。
它的特點包括：
一個網站可能有一個或多個 IndexedDB 數據庫，每個數據庫必須具有惟一的名稱。
一個數據庫可包含一個或多個對象存儲。一個對象存儲（由一個名稱惟一標識）是一個記錄集合。每個記錄有一個鍵 和一個值。該值是一個對象，可擁有一個或多個屬性。鍵可能基于某個鍵生成器，從一個鍵路徑衍生出來，或者是顯式設置。一個鍵生成器自動生成惟一的連續正整數。鍵路徑定義了鍵值的路徑。它可以是單個 JavaScript 標識符或多個由句點分隔的標識符。(有點像列數據庫的特點)
IndexedDB中，幾乎所有的操作都是采用了command->request->result的方式。比如查詢一條記錄，返回一個request，在request的result中得到查詢結果。又比如打開數據庫，返回一個request，在request的result中得到返回的數據庫引用。
indexedDB需要放到web服務器上才可以運行。
以上就是html5幾種在客戶端存儲數據的實例，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
