JS本地存儲詳解

一、localStorage與sessionStorage的區別

localStorage與sessionStorage都屬於Web Storage的API。兩者的區別在於：

1、存儲數據的生命周期：localStorage可以永久存儲數據，除非手動刪除或清空瀏覽器緩存。而sessionStorage只能在會話期間（同一窗口或標籤頁）有效，在關閉窗口或標籤頁後自動丟失。

2、存儲數據的作用域：localStorage在同一域名下的所有頁面均可訪問，而sessionStorage僅限於同一會話期間的頁面可訪問。

因此，localStorage適合用於持久化存儲一些用戶配置信息、用戶偏好等數據。而sessionStorage則適合用於臨時存儲會話期間需要用到的數據。

//localStorage示例代碼
localStorage.setItem('username', 'Alice');
localStorage.getItem('username'); //返回'Alice'
localStorage.removeItem('username');

//sessionStorage示例代碼
sessionStorage.setItem('orderId', '123456');
sessionStorage.getItem('orderId'); //返回'123456'
sessionStorage.clear();

二、indexedDB的使用

indexedDB是一個基於事件的本地數據庫API，可以在客戶端（瀏覽器、PWA）中存儲和檢索大量數據。相比localStorage和sessionStorage而言，indexedDB可以支持更大容量的數據，並且更適合存儲結構化數據。

使用indexedDB可以分為以下幾個步驟：

1、創建或打開數據庫：打開一個數據庫需要指定數據庫名、版本號和數據庫描述。

2、創建對象存儲空間：對象存儲空間類似於一張表，存儲一組有共同字段的對象。

3、添加數據：使用add或put方法將數據添加到指定的對象存儲空間。

4、查詢數據：使用get、getAll或索引查詢等方法進行數據檢索。

5、更新數據：使用put方法更新指定的數據。

6、刪除數據：使用delete或clear方法刪除指定或全部數據。

//創建或打開數據庫
const request = indexedDB.open('myDatabase', 1); //第二個參數為數據庫的版本號

//創建對象存儲空間
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const store = db.createObjectStore('books', { keyPath: 'isbn' });
};

//添加數據
request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(['books'], 'readwrite');
  const store = transaction.objectStore('books');
  
  const book = {
    title: 'JavaScript高級程序設計',
    author: 'Nicholas C.Zakas',
    isbn: '978-7-121-20717-6'
  };
  
  const addRequest = store.add(book);
  
  addRequest.onsuccess = function() {
    console.log('保存成功');
  };
};

//查詢數據
request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(['books'], 'readonly');
  const store = transaction.objectStore('books');
  
  const getRequest = store.get('978-7-121-20717-6');
  
  getRequest.onsuccess = function(event) {
    const book = event.target.result;
    console.log(book.title, book.author);
  };
};

//更新數據
request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(['books'], 'readwrite');
  const store = transaction.objectStore('books');
  
  const updateRequest = store.put({
    title: '新的JavaScript高級程序設計',
    author: 'Nicholas C.Zakas',
    isbn: '978-7-121-20717-6'
  });
  
  updateRequest.onsuccess = function() {
    console.log('更新成功');
  };
};

//刪除數據
request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(['books'], 'readwrite');
  const store = transaction.objectStore('books');
  
  const deleteRequest = store.delete('978-7-121-20717-6');
  
  deleteRequest.onsuccess = function() {
    console.log('刪除成功');
  };
};

三、cookie的使用

以前在Web開發中，cookie是常用的本地存儲方式。在HTTP請求中，cookie會隨着請求頭一起發送到服務器端，服務器通過設置響應頭Set-Cookie來設置Cookie。

因此，cookie適合用於存儲小容量、敏感性不高的數據，如用戶登錄狀態、用戶行為記錄等。但是，cookie的缺點也比較明顯，如容量小（4KB）、必須在服務器端解析等。

使用cookie可以分為以下幾個步驟：

1、設置cookie：在響應頭中設置Set-Cookie。

2、讀取cookie：從請求頭中讀取Cookie。

3、更新cookie：同設置cookie。

//設置cookie
document.cookie = 'name=Alice';

//讀取cookie
const name = document.cookie.split('; ')[0].split('=')[1];

//更新cookie
document.cookie = 'name=Bob';

四、Web Storage的兼容性

雖然localStorage和sessionStorage已經成為常用的本地存儲方式，但是還是存在一些瀏覽器不支持的情況。在低版本的IE瀏覽器中，Web Storage API可能不被支持或存在兼容性問題。因此，需要在使用之前檢查瀏覽器是否支持Web Storage API。

if(typeof(Storage) !== 'undefined') {
  //支持Web Storage API
} else {
  //不支持Web Storage API
}

五、本地存儲的安全性

使用本地存儲時，需要注意數據的安全性。因為本地存儲的數據存儲在用戶的本地硬盤中，存在被竊取的可能性。

為了增加數據的安全性，在使用Web Storage時，可以做以下的處理：

1、不存儲敏感數據：如密碼、銀行賬戶等敏感信息不要存儲在本地。

2、加密處理：可以對存儲的數據進行加密處理。

3、短期過期：設置短期過期時間，如30分鐘或1小時。

4、跨域訪問：盡量不要在跨域的情況下使用Web Storage API，避免數據被其他域名下的頁面訪問到。

六、總結

本文從localStorage與sessionStorage的區別、indexedDB的使用、cookie的使用、Web Storage的兼容性和安全性等方面詳細介紹了JavaScript本地存儲的相關知識。希望本文可以對讀者了解和使用JavaScript本地存儲提供幫助。