cookie 存儲數據的功能已經很難滿足開發所需，逐漸被 WebStorage、IndexedDB 所取代
cookie詳情見cookie
①LocalStorage
保存的數據長期存在（特點：持久），下一次訪問該網站的時候，網頁可以直接讀取以前保存的數據。僅在客戶端使用，不和服務器進行通信。
可以作爲瀏覽器本地緩存方案。用來提升網頁首屏渲染速度（根據第一次返回，將一些不變得信息直接存儲在本地）
存入數據：locoalStorage.setItem("key","value");
讀取數據：locoalStorage.getItem("key");
<body>
<div id="name"></div>
<div id="gender"></div>
<script>
var name = localStorage.getItem("name");
var gender = localStorage.getItem("gender");
document.getElementById("name").innerHTML = name;
document.getElementById("gender").innerHTML = gender;
</script>
</body>
△因爲他的特點是持久，所以用它來存儲一些內容穩定的資源，比如圖片內容豐富的電商網站存儲圖片字符串。
②sessionStorage
sessionStorage保存的數據用於瀏覽器的一次會話，會話結束的時候（窗口關閉的時候），數據被清空；他的特點：即使是相同域名下的兩個頁面，只要他們不在同一個瀏覽器窗口中打開，他們的sessionStorage就無法共享；localStorage在所有窗口中是共享的，cookie也是在所有同源窗口中共享。除了保存期限的長短不同，SessionStorge的屬性方法和localStorage的完全一樣。
sassionStorage的特點：會話級別的瀏覽器存儲，5M左右，僅在客戶端使用，不和服務端進行通信，接口封裝良好。
所以sessionStorage可以有效的對錶單信息進行維護，比如刷新的時候，表單信息不丟失。只適用於當前會話，存儲生命週期和他同步的當前級別的會話，當你開啓新會話的時候，他也需要相應的更新或釋放。
sessionStorage 和localStorage的區別：
同：都保存在瀏覽器端且都遵循同源策略。
異：生命週期與作用域不同。
作用域：localStorage只要在相同的協議域名端口號下，就能夠讀取或者修改同一份localStorage數據。sessionStorage比localStorage嚴苛，還必須在同一個窗口下。
生命週期：localStorage是持久化的本地存儲，存儲在裏面的數據除非手動刪除否則不會過期。sessionStorage是臨時性的本地存儲，會話級別存儲，會話結束存儲內容釋放。
webStorage
鍵值對形式進行存儲，只能存儲字符串，想要得到對象就要對字符串進行解析，只能存儲少量的簡單數據。
④IndexedDB：
低級Api，客戶端存儲大量結構化數據。引用索引實現對數據的高能搜索，是一個運行在瀏覽器上的非關係型的數據庫。沒有存儲上限，不僅可以存儲字符串，還可以存儲二進制數據。
特點：鍵值對存儲。異步（localStorage的操作是同步的）異步是爲了防止大量數據讀寫，拖慢網頁。支持事務（只要有一步失敗，整個失誤就取消，數據庫回滾到事務發生之前的狀態，不存在只寫一部分數據的情況）。同源限制，每一個數據庫對應創建他的域名，網頁只能訪問同源下的數據庫。存儲空間大。支持二進制存儲。
他的操作是請求響應模式：
建立打開 IndexedDB ----window.indexedDB.open("testDB")
這條指令並不會返回一個 DB 對象的句柄，我們得到的是一個 IDBOpenDBRequest 對象，
而我們希望得到的 DB 對象在其 result 屬性中 除了 result，IDBOpenDBRequest 接口定義了幾個重要屬性:
onerror: 請求失敗的回調函數句柄 onsuccess:請求成功的回調函數句柄 onupgradeneeded:請求數據庫版本
變化句柄
<script>
function openDB(name) {
var request = window.indexedDB.open(name); //建立打開
IndexedDB request.onerror = function (e) {
console.log("open indexdb error");
};
request.onsuccess = function (e) {
myDB.db = e.target.result; //這是一個 IDBDatabase 對象，這就是 IndexedDB 對象
console.log(myDB.db); //此處就可以獲取到 db 實例 };
}
var myDB = { name: "testDB", version: "1", db: null };
openDB(myDB.name);
</script>
總結：
Web Storage 是 HTML5 專門爲瀏覽器存儲而提供的數據存儲機制，不與 服務端發生通信 IndexedDB 用於客戶端存儲大量結構化數據