JavaScript Storage管理技巧：如何利用瀏覽器本地存儲？

JavaScript中，我們可以使用瀏覽器的本地存儲來保存數據。這對於提升用戶體驗和服務端性能有非常大的作用。本文將探討JavaScript中的本地存儲技巧。

一、localStorage和sessionStorage

在瀏覽器端，localStorage 和 sessionStorage 是兩個非常常用的本地存儲方式。它們都可以獨立存儲至少5MB的數據，並支持增刪改查操作。

//localStorage的使用方法
localStorage.setItem('name', 'John');
console.log(localStorage.getItem('name')); //John
localStorage.removeItem('name');

//sessionStorage的使用方法
sessionStorage.setItem('name', 'John');
console.log(sessionStorage.getItem('name')); //John
sessionStorage.removeItem('name');

這裡需要注意的是，localStorage與sessionStorage之間的區別在於後者的存儲內容僅限於用戶會話（session）期間，當用戶關閉瀏覽器窗口後，存儲的數據將被清除。

二、cookie

除了localStorage和sessionStorage，JavaScript還有一種常用的本地存儲方式是cookie。cookie是一小段文本信息，存儲在瀏覽器端，以便下次訪問時讀取信息。cookie具有以下特點：

• 每個cookie的最大大小約為4kb。
• 每個域名下最多可以存儲20個cookie。
• cookie可以設置過期時間。
• cookie可以被JS直接讀取。

//設置cookie
document.cookie = "username=John; expires=Tue, 19 Jan 2038 03:14:07 UTC; path=/"

//讀取cookie
function getCookie(cname) {
  const name = cname + "=";
  const ca = document.cookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while(c.charAt(0) === ' ') {
      c = c.substring(1);
    }
    if(c.indexOf(name) === 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

//刪除cookie
function deleteCookie(cname) {
  document.cookie = `${cname}=''; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`
}

三、IndexDB

如果需要存儲更多數據，我們可以使用IndexDB。IndexDB是一種以對象存儲為基礎的高級本地存儲技術，可以存儲大量結構化數據，支持離線訪問。

//打開資料庫
const request = window.indexedDB.open('myDB', 1)
let db
request.onerror = function(event) {
  console.error('Database error: ' + event.target.errorCode);
};
request.onsuccess = function(event) {
  db = event.target.result;
};

//創建對象倉庫
const objectStore = db.createObjectStore('users', { keyPath: 'id' });

//添加數據
const tx = db.transaction(['users'], 'readwrite');
const store = tx.objectStore('users');
const user1 = { id: 1, name: 'John', age: 28 };
store.add(user1);

//查詢數據
const tx = db.transaction(['users'], 'readonly');
const store = tx.objectStore('users');
const request = store.get(1);
request.onsuccess = function() {
  console.log(request.result);
};

//更新數據
const tx = db.transaction(['users'], 'readwrite');
const store = tx.objectStore('users');
const request = store.get(1);
request.onsuccess = function() {
  const data = request.result;
  data.age++;
  store.put(data);
};

//刪除數據
const tx = db.transaction(['users'], 'readwrite');
const store = tx.objectStore('users');
store.delete(1);

四、總結

本文介紹了JavaScript在本地存儲方面的幾種方式：localStorage和sessionStorage，cookie和IndexDB。每種本地存儲技術都有其適用的場景，需要視具體情況而定。