【js】前端持久化存儲

cookie

生命期爲只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。 存放數據大小爲4K左右 。有個數限制（各瀏覽器不一樣），通常不能超過20個。與服務器端通訊：每次都會攜帶在HTTP頭中，若是使用cookie保存過多數據會帶來性能問題。
http://www.runoob.com/js/js-c...

localStorage

localStorage生命週期是永久，這意味着除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，不然這些信息將永遠存在。存放數據大小爲通常爲5MB,並且它僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊。

sessionStorage

爲每個數據源維持一個存儲區域，在瀏覽器打開期間存在，包括頁面從新加載

api

sessionStorage 和 localStorage 的用法基本一致，引用類型的值要轉換成JSON

保存數據到本地

const info = {
        name: 'Lee',
        age: 20,
        id: '001'
    };
    sessionStorage.setItem('key', JSON.stringify(info));
    localStorage.setItem('key', JSON.stringify(info));

從本地存儲獲取數據

var data1 = JSON.parse(sessionStorage.getItem('key'));
var data2 = JSON.parse(localStorage.getItem('key'));

本地存儲中刪除某個保存的數據

sessionStorage.removeItem('key');
localStorage.removeItem('key');

刪除全部保存的數據

sessionStorage.clear();
localStorage.clear();

監聽本地存儲的變化

window.addEventListener('storage', function (e) {
        console.log('key', e.key);
        console.log('oldValue', e.oldValue);
        console.log('newValue', e.newValue);
        console.log('url', e.url);
    })

indexedDB

在使用一個技術以前，先搞清楚它是什麼，這對你的理解很重要，從DB就能夠看出，它確定是一個數據庫，而說到數據庫，有兩種不一樣類型的數據庫，就是關係型數據庫和非關係型數據庫，關係型數據庫如Mysql、Oracle等將數據存儲在表中，而非關係型數據庫如Redis、MongoDB等將數據集做爲個體對象存儲。indexedDB就是一個非關係型數據庫，它不須要你去寫一些特定的sql語句來對數據庫進行操做，由於它是nosql的，數據形式使用的是json，

意義

也許熟悉前端存儲的會說，不是有了LocalStorage和Cookies嗎？爲何還要推出indexedDB呢？其實對於在瀏覽器裏存儲數據，你可使用cookies或local storage，但它們都是比較簡單的技術，而IndexedDB提供了相似數據庫風格的數據存儲和使用方式。

首先說說Cookies，英文直接翻譯過來就是小甜點，聽起來很好吃，實際上並非，每次HTTP接受和發送都會傳遞Cookies數據，它會佔用額外的流量。例如，若是你有一個10KB的Cookies數據，發送10次請求，那麼，總計就會有100KB的數據在網絡上傳輸。Cookies只能是字符串。瀏覽器裏存儲Cookies的空間有限，不少用戶禁止瀏覽器使用Cookies。因此，Cookies只能用來存儲小量的非關鍵的數據。

其次說說LocalStorage，LocalStorage是用key-value鍵值模式存儲數據，但跟IndexedDB不同的是，它的數據並非按對象形式存儲。它存儲的數據都是字符串形式。若是你想讓LocalStorage存儲對象，你須要藉助JSON.stringify()能將對象變成字符串形式，再用JSON.parse()將字符串還原成對象。但若是要存儲大量的複雜的數據，這並非一種很好的方案。畢竟，localstorage就是專門爲小數量數據設計的，因此它的api設計爲同步的。而IndexedDB很適合存儲大量數據，它的API是異步調用的。IndexedDB使用索引存儲數據，各類數據庫操做放在事務中執行。IndexedDB甚至還支持簡單的數據類型。IndexedDB比localstorage強大得多，但它的API也相對複雜。對於簡單的數據，你應該繼續使用localstorage，但當你但願存儲大量數據時，IndexedDB會明顯的更適合，IndexedDB能提供你更爲複雜的查詢數據的方式。

indexedDB的特性

1.對象倉庫
2.事務性
3.基於請求
4.異步

使用

1. 打開數據庫而且開始一個事務。
2. 建立一個 object store。
3. 構建一個請求來執行一些數據庫操做，像增長或提取數據等。
4. 經過監聽正確類型的 DOM 事件以等待操做完成。
5. 在操做結果上進行一些操做（能夠在 request 對象中找到）

https://www.cnblogs.com/dengy...
https://segmentfault.com/a/11...

HTML5 Web SQL

HTML5已經會放棄Web SQL Database