早期Web使用cookie在瀏覽器端保存數據，但存在以下問題：
- cookie的大小限制在4KB
- 瀏覽器會限制所有站點在計算機上的存儲cookie總數
- cookie會隨着每次HTTP事務一起發送，會浪費一部分帶寬
HTML5提供了WebStorage本地存儲、IndexedDB本地數據庫等，能夠存儲更多更復雜的數據。
一、WebStorage
WebStorage以Key-Value對的方式存儲，容量有5M，分為兩種：
- 永久性的本地存儲localStorage，可以永久存儲在瀏覽器端
- 會話級別的本地存儲sessionStorage，關閉瀏覽器窗口數據會清空
瀏覽器支持：除了IE7及更早版本，其它瀏覽器均可支持
檢查瀏覽器是否支持：
if(typeof(Storage) !== “undefined”)
{
// 支持
}else
{
// 不支持
}
操作API：
以下方法均用 loaclStorage 或 sessionStorage 調用 getItem(key) <=> sessionStorage.Key 獲取值 setItem(key,value) <=> sessionStorage.Key = value 設置值 removeItem(key) length 返回key/value列表的長度 key(index) 返回對應索引的key值 clear() 清空存儲（刪除所有key/value對）
遍歷：
var se = window.sessionStorage;
for(var i=0;i<se.length;i++)
{
console.log("{0}：{1}\n".format(se.key(i),se.getItem(se.key(i))));
}
事件
當存儲區域（localstorage、sessionstorage）被修改時，將觸發storage事件。注意，該事件只會在同源頁面觸發，不會在發生修改的頁面觸發。
事件對象 StorageEvent
target 事件目標(DOM 樹中的最大目標) type 事件的類型 bubbles 事件通常是否會出現冒泡 cancelable 事件是否可取消 key 鍵更改的key oldValue 正在更改鍵的舊值 newValue 正在更改鍵的新值 url 鍵更改的文檔的地址 storageArea 受影響的存儲對象
示例：
window.addEventListener("storage", (e) => {});
二、IndexedDB
與WebStorage使用簡單字符串鍵值對不同，IndexedDB是為了能夠在客戶端儲存大量的結構化數據，並使用索引高效檢索的API。前者適合存儲少量的數據，對於存儲大量結構化的數據，則可使用IndexedDB本地數據庫。
瀏覽器兼容性：所有主流瀏覽器都已兼容。
基本概念
數據庫：IDBDatabase 對象 每個域名（嚴格的說是協議+域名+端口）都可以新建任意多的數據庫。同一個時刻只能有一個版本的數據庫存在 對象倉庫：IDBObjectStore 對象 每個數據庫包含若干個對象倉庫，類似於關系型數據庫中的表格 數據記錄： 對象倉庫保存的是數據記錄，只有主鍵和數據體兩部分。數據體可以是任意數據類型。 索引： IDBIndex 對象 數據記錄的讀寫和刪改，都要通過事務完成。事務對象提供error、abort和complete三個事件，用來監聽操作結果。 事務： IDBTransaction 對象 操作請求：IDBRequest 對象 指針： IDBCursor 對象 主鍵集合：IDBKeyRange 對象
打開數據庫
var request = window.indexedDB.open(databaseName, version); // 如果不存在則創建
open 請求不會立即打開數據庫或者開始一個事務， 而是返回一個IDBRequest對象，這個對象通過error、success、upgradeneeded三個事件處理打開數據庫的操作結果。
request.onerror = function (event) {
console.log('數據庫打開報錯');
};
var db;
request.onsuccess = function (event) {
db = request.result;
console.log('數據庫打開成功');
};
// 如果指定的版本號，大於數據庫的實際版本號，就會發生數據庫升級事件upgradeneeded
request.onupgradeneeded = function (event) {
db = event.target.result;
}
通過事件對象的target.result屬性，拿到數據庫實例
三、Web SQL Datebase
HTML5 IndexedDB和Web SQL Database都是本地數據庫數據存儲，Web SQL Database數據庫要出來的更早，然並卵。從2010年11月18日W3C宣布舍棄Web SQL database草案開始，就已經注定Web SQL Database數據庫是明日黃花。因此在此只做一些了解。
Web SQL Database允許引用程序通過一個異步JavaScript接口訪問SQLlite數據庫。瀏覽器兼容性：主流瀏覽器除IE、Edge、Firefox
HTML5對Web SQL的操作包含以下3個核心方法：
- openDatebase：用來創建或打開數據庫
- transaction：允許我們執行事務處理
- executeSql：用於執行SQL語句
1.創建/打開數據庫
var db = openDatabase(name,version,text,size,callback) 參數：數據庫名稱、版本號、描述文本、數據庫大小(字節)、創建回調(非必須)
2.執行事務
db.transaction(function (tx) {
// ... tx為transaction對象的引用。
});
3.寫SQL語句
executeSql(sql,[],datahandler,errorhandler) 參數：要執行的sql語句，sql語句中占位符"?"對應的參數值，執行成功時調用的回調，失敗時調用的回調
示例：
$(function(){
var db = openDatabase("data.db","1.0","demo data",1024*1024);
if(!db)
{
alert("該瀏覽器不支持Web SQL");
}
db.transaction(function (tx) {
// 創建表
tx.executeSql("create table if not exists Demo(uName text null,title text null ,words text null)",
[],function (tx,result) { /*result返回的結果*/ },function (tx,message) { /*message是錯誤信息的描述*/ });
// 寫入數據
tx.executeSql("insert into Demo(uName,title,words)values(?,?,?)",["姓名","標題","內容"],
function (tx,data) { alert(data) }, function (tx, error) { alert(error) });
// 讀取數據
tx.executeSql("select * from deom",[],function (tx, data) { alert(data) },
function (tx, error) { alert(error) });
});
});
四、Application Cache（應用緩存）
HTML5引入了應用程序緩存技術，意味着web應用可進行緩存，並在沒有網絡的情況下使用，通過創建cache manifest文件，可以輕松的創建離線應用。
Application Cache帶來的三個優勢是：① 離線瀏覽 ② 提升頁面載入速度 ③ 降低服務器壓力；缺點是：① 更新版本后，必須刷新一次才會啟動新版本 ② 進入離線存儲的頁面，如果不更新版本，是會將其當成靜態頁面不請求 ③ 無法進行灰度發布等策略。
Application Cache和WebStorage在使用上的區別是，后者存儲非關鍵性數據，做錦上添花的事情，前者用於存儲靜態資源。
使用方法：
1.配置manifest文件
<html manifest="demo.appcache"> ... </html>
2.manifest文件
manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。
manifest 文件可分為三個部分：
① CACHE MANIFEST - 列出需要緩存的文件（必需）
② NETWORK - 列出不需要被緩存的文件（非必需）
③ FALLBACK - 列出規定當頁面無法訪問時的回退頁面（文件,比如 404 頁面，非必需）
CACHE MANIFEST # 緩存文件愛你 /theme.css /main.js NETWORK: # 不需要緩存的文件 login.jsp FALLBACK: /html/ /offline.html
3.服務器端
manifest文件需要配置正確的MIME-type，即 "text/cache-manifest"，必須在web服務器上進行配置。
4.常用API
核心是applicationCache對象，有個status屬性，表示應用緩存的當前狀態：
0 （UNCACHED）: 無緩存， 即沒有與頁面相關的應用緩存 1 （IDLE）: 閑置，即應用緩存未得到更新 2 （CHECKING）: 檢查中，即正在下載描述文件並檢查更新 3 （DOWNLOADING）: 下載中，即應用緩存正在下載描述文件中指定的資源 4 （UPDATEREADY）: 更新完成，所有資源都已下載完畢 5 （IDLE）: 廢棄，即應用緩存的描述文件已經不存在了，因此頁面無法再訪問應用緩存
5.JS事件（表示應用緩存的狀態的改變）
checking : 在瀏覽器為應用緩存查找更新時觸發 error : 在檢查更新或下載資源期間發送錯誤時觸發 noupdate : 在檢查描述文件發現文件無變化時觸發 downloading : 在開始下載應用緩存資源時觸發 progress：在文件下載應用緩存的過程中持續不斷地下載地觸發 updateready : 在頁面新的應用緩存下載完畢觸發 cached : 在應用緩存完整可用時觸發
6.更新緩存
1.更新manifest文件 2.清除瀏覽器緩存 3.通過JavaScript操作
applicationCache.addEventListener('updateready', function(e) {
if (applicationCache.status == applicationCache.UPDATEREADY) {
applicationCache.swapCache(); //使用新版本資源
window.location.reload(); //刷新頁面
}
}, false);
6.注意事項
1. 瀏覽器對緩存數據的容量限制可能不太一樣（某些瀏覽器設置的限制是每個站點 5MB）
2. 如果manifest文件，或者內部列舉的某一個文件不能正常下載，整個更新過程將視為失敗，瀏覽器繼續全部使用老的緩存
3. 引用manifest的html必須與manifest文件同源，在同一個域下
4. 瀏覽器會自動緩存引用manifest文件的HTML文件，這就導致如果改了HTML內容，也需要更新版本才能做到更新。
5. manifest文件中CACHE則與NETWORK，FALLBACK的位置順序沒有關系，如果是隱式聲明需要在最前面
6. FALLBACK中的資源必須和manifest文件同源
7. 更新完版本后，必須刷新一次才會啟動新版本（會出現重刷一次頁面的情況），需要添加監聽版本事件。
8. 站點中的其他頁面即使沒有設置manifest屬性，請求的資源如果在緩存中也從緩存中訪問
9. 當manifest文件發生改變時，資源請求本身也會觸發更新
7.離線緩存與傳統瀏覽器緩存的區別
1. 離線緩存是針對整個應用，瀏覽器緩存是單個文件
2. 離線緩存斷網了還是可以打開頁面，瀏覽器緩存不行
3. 離線緩存可以主動通知瀏覽器更新資源
參考資料：
http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
https://www.cnblogs.com/LuckyWinty/p/5699117.html
https://www.cnblogs.com/yexiaochai/p/4271834.html