瀏覽器儲存資料的幾種方法

Ken.W發表於2019-01-12
瀏覽器

Web產品中很多時候需要在客戶端，即瀏覽器中儲存一些必要的資料。而面臨這類需求時，你應當知悉對應的解決方案不僅僅只有一種。

Cookie

這是最早被使用，且至今仍被廣泛採用的最簡單的瀏覽器中儲存資料方法。

Cookie使用鍵/值形式儲存資料，且資料型別只能為字串。

Cookie相關的CRUD操作：

  • 建立
document.cookie="username=Ken";
  • 修改
document.cookie="username=Foo";

和建立Cookie的語法一致，新的值會覆蓋原有的值。

  • 查詢
var cookies = document.cookie

以上方法可以獲取所有的Cookie鍵值，要想獲得特定鍵值的話可以用以下程式碼實現，其中的username可以替換成實際的鍵值：

var cookieValue = document.cookie.replace(/(?:(?:^|.*;s*)usernames*=s*([^;]*).*$)|^.*$/, "$1");
  • 刪除
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

雖然沒有直接的刪除方式，但可以通過設定過期時間來解決這個問題。

LocalStorage

HTML 5 Web儲存方式的一種，主要優勢是突破cookie最大隻有4KB容量的限制，能夠儲存10MB的資料。

與Cookie同樣地使用鍵/值形式儲存資料，且資料型別只能為字串。

LocalStorage相關的CRUD操作：

  • 建立
localStorage.setItem(`username`, `Ken`);
  • 修改
localStorage.setItem(`username`, `Foo`);

同樣是覆蓋操作。

  • 查詢
var username = localStorage.getItem(`username`);
  • 刪除
localStorage.removeItem(`username`);

一次刪除所有鍵值的方法：

localStorage.clear();

SessionStorage

另一種HTML 5 Web儲存方式，其與LocalStorage的唯一區別在於LocalStorage沒有過期時間，要想去除已儲存的資料，只能用程式碼執行刪除操作。而用SessionStorage儲存的資料在標籤頁或者瀏覽器視窗關閉後自動失效。

SessionStorage相關語法與LocalStorage一致。

Web SQL Database

該技術已被W3C廢棄，理由是各廠家對其的實現方式都是基於SQLite的，從而被認為缺乏多樣性而達不到標準化的要求。

並且該技術僅被Google Chrome，Opera，Safari和Android Browser使用。另兩家主要的瀏覽器廠家的產品，Microsoft的Internet Explorer以及Mozilla的Firefox對它未提供支援。

因此結論是使用其它相似的替換品，而不要再使用它。

IndexedDB

主流瀏覽器產品都支援的一種技術，包括桌面端與移動端。Web SQL Database的替代品。

IndexedDB同Cookie，Local Storage與Session Storage的差別主要有：

  • 儲存容量更大，可達50M或更多
  • 支援所有的JavaScript資料型別
  • 讀寫操作皆包含於事務之內
  • 支援索引查詢
  • 非同步處理方式

IndexedDB的使用方法與一般的資料庫有些相似，但因為其所有操作都是非同步，所以編寫程式碼時的體驗還是很不一樣的。

第一步是開啟一個資料庫，如果該資料庫不存在的話，會自動建立一個。
在IndexedDB中，ObjectStore是其它資料庫中資料表的概念。
建立ObjectStore時除了可以指定主鍵之外，還可以對其它欄位建立索引。

var db;

var request = window.indexedDB.open(`info`);
request.onsuccess = function (event) {
  db = request.result;
};

request.onupgradeneeded = function(event) {
  db = event.target.result;

  var objectStore = db.createObjectStore(`user`, { keyPath: `id` });

  objectStore.createIndex("name", "name", { unique: false });
}

IndexedDB相關的CRUD操作：

  • 建立
function create() {
  var store = db.transaction(`user`, `readwrite`).objectStore(`user`)
  var request = store.add({ id: 1, name: `Ken`, email: `ken@example.com` });
}

create();
  • 修改
function update() {
  var store= db.transaction(`user`, `readwrite`).objectStore(`user`)
  var request = store.put({ id: 1, name: `Ken`, email: `ken@sample.com` });
}

update()
  • 查詢

使用主鍵查詢資料的方法：

function query() {
  var store = db.transaction(`user`, `readonly`).objectStore(`user`)
  var request = store.get(1)
  request.onsuccess = function(event) {
    console.log(request.result)
  }
}

query()

使用其它欄位索引查詢資料的方法：

function query() {
  var store = db.transaction(`user`, `readonly`).objectStore(`user`)
  var request = store.index(`name`).get(`Ken`)
  request.onsuccess = function(event) {
    console.log(request.result)
  }
}

query()
  • 刪除
function delete() {
  var store = db.transaction(`user`, `readwrite`).objectStore(`user`)
  var request = store.delete(1);
}

delete()

相關文章