[JavaScript] localStorage的概念及使用方法

在網頁開發中，客戶端存儲數據的方式眾多。其中，localStorage便是一種持久性的客戶端存儲機制。即便網頁被關閉或重新加載，其中的數據也不會被清除。這與只在網頁的單一會話期間（即瀏覽器標籤頁打開時）存儲數據的sessionStorage有所不同。localStorage不僅可用於儲存數據，更可用於保存用戶的偏好設定、購物車信息等多種用途。本文將詳細介紹localStorage的特性、使用方式及需要注意的事項。

何謂localStorage？

localStorage為網頁提供了一套存儲鍵-值對的網路存儲方案。

它使網頁應用能夠永久存儲數據，從而增強了用戶體驗。由於這些數據存放在用戶的瀏覽器上，因此可以無需多次向伺服器發送請求就能輕鬆訪問。

localStorage的特性

持久性存儲

在localStorage中儲存的數據沒有過期時間，除非用戶手動刪除或網頁應用程序執行刪除操作。與此相對，sessionStorage中的數據會在網頁會話結束時自動清除。

儲存容量

大部分瀏覽器的localStorage容量限制在5MB~10MB之間。但不同瀏覽器可能有些許差異。此容量遠大於cookie的4KB限制。

域名及協議限制

localStorage只能在相同的域名和協議下訪問。此限制出於安全考量，以防止其他域名或協議訪問在localStorage中儲存的數據。

如何使用localStorage？

儲存數據

在網頁應用中，持續儲存用戶資料或設定是至關重要的。此時，localStorage便是理想的解決方案，可以在用戶的瀏覽器中以鍵-值對的方式儲存資料。此數據即使在網頁會話之間、頁面刷新或瀏覽器重新啟動後，也不會丟失。

使用JavaScript的localStorage對象儲存數據的方法如下：

javascript
localStorage.setItem('key', 'value');

setItem方法的第一個參數是作為數據標識的鍵名，第二個參數是要儲存的實際值。這樣儲存的數據即使關閉瀏覽器也會保留。

讀取數據

一旦數據被存儲在localStorage中，可以在需要時隨時讀取。要讀取數據，需要知道其鍵。

javascript
let 數據 = localStorage.getItem('key');
console.log(數據);

getItem方法接受一個鍵作為參數，並返回相應的值。如果該鍵不存在，則返回null。

刪除數據

在數據存儲中，定期刪除無用或過期的資訊是常見的操作。若要刪除localStorage中與某特定鍵相關的數據，可以這樣操作：

javascript
localStorage.removeItem('key');

removeItem方法會刪除指定鍵的數據。如果要刪除的鍵不存在，則不執行任何操作。

刪除所有數據

在某些情況下，可能需要刪除localStorage中的所有數據。此時可以使用以下方法：

javascript
localStorage.clear();

使用clear方法將一次性刪除localStorage中的所有數據。使用此方法時需格外小心，因為一旦執行，可能會造成不可恢復的數據損失。

localStorage 的應用場景

localStorage 在多種網路應用程式中均有著重要的運用。以下將列出三個具體的使用案例來展示 localStorage 的效用。

1. 保留使用者設定

為了記住使用者在網站或網路應用程式中的個性化設定，我們可以利用 localStorage 來達到此目的。例如，網站所提供的深色模式/亮色模式切換、字型大小、語言選擇等使用者設定都可以存儲在 localStorage 中，以確保使用者在下次訪問時能夠維持相同的使用環境。

javascript
// 儲存使用者設定
function saveUserSettings(theme, fontSize, language) {
    localStorage.setItem('theme', theme);
    localStorage.setItem('fontSize', fontSize);
    localStorage.setItem('language', language);
}

// 讀取儲存的設定
function loadUserSettings() {
    const theme = localStorage.getItem('theme');
    const fontSize = localStorage.getItem('fontSize');
    const language = localStorage.getItem('language');
    // 將此設定應用至網頁的程式碼
}

2. 儲存購物車資料

在線上購物平台，可將使用者加入購物車的商品暫時存儲在 localStorage 中，這樣當使用者離開網站後再次訪問，之前添加的商品仍會保留在購物車中。

javascript
// 新增商品至購物車
function addToCart(product) {
    let cart = JSON.parse(localStorage.getItem('cart')) || [];
    cart.push(product);
    localStorage.setItem('cart', JSON.stringify(cart));
}

// 讀取購物車商品
function getCartItems() {
    return JSON.parse(localStorage.getItem('cart')) || [];
}

3. 儲存遊戲進度

於基於網路的遊戲中，可以將玩家的遊戲進度、分數、設定等資料儲存在 localStorage 中，使玩家在下次啟動遊戲時能夠載入先前的遊戲進度。

javascript
// 儲存遊戲進度
function saveGameProgress(progress, score) {
    localStorage.setItem('gameProgress', progress);
    localStorage.setItem('gameScore', score);
}

// 讀取儲存的遊戲進度
function loadGameProgress() {
    const progress = localStorage.getItem('gameProgress');
    const score = localStorage.getItem('gameScore');
    // 將該遊戲進度和分數應用至遊戲的程式碼
}

如此，localStorage 可以在網路應用程式中以多種方式被運用，進而提升使用者的體驗。

localStorage的注意事項

在網頁開發中，localStorage常被視為一個非常實用的工具。但若要正確使用它，有一些事項必須特別留意。

儲存容量限制

localStorage的儲存容量是有限的。在大多數瀏覽器中，僅能儲存5MB~10MB的資料。因此，它不適合用於儲存大型資料，若有此需求，應該考慮其他儲存方案。

資料安全

  • localStorage中的資料不會被加密。因此，不建議儲存敏感的個人資訊或重要數據。
  • 存在如XSS（跨站腳本攻擊）等安全風險。若有惡意腳本被注入到網站中，可能會訪問localStorage中的資料，所以必須小心。

僅能儲存字符串

localStorage只能儲存字符串。因此，若需要儲存如物件或陣列等資料結構，須使用JSON.stringify()將其轉換為字符串後儲存。在之後使用該資料時，可以用JSON.parse()將其轉回原始資料結構。

同步操作

localStorage的操作是同步的。意即，當與localStorage相關的操作正在進行時，網頁應用的其他操作會暫時停止。因此，頻繁的資料查詢或大量資料處理可能會影響應用的效能。

瀏覽器支持

大多數現代瀏覽器都支持localStorage。但一些非常老舊或某些特定的瀏覽器可能不支持。因此，開發者需確定目標用戶的瀏覽器支持範圍，並考慮使用如polyfill等方法來補足功能。

域名和協議限制

localStorage根據網頁的域名和協議進行分隔。因此，http和https協議或不同的域名之間不能共享localStorage的資料。

要注意這些問題，是為了在使用localStorage時確保資料的完整性、安全性，以及應用的效能。

localStorage在網頁開發中作為客戶端數據存儲的高效方法已被廣泛採用。然而，在使用它的過程中，必須精確地瞭解其特性、優缺點，並確實掌握與安全性相關的注意事項。特別是對於儲存敏感信息，以及需要處理大量數據或需要快速處理的場景，可能需要尋找其他方案。為了提高網頁應用的效能和用戶體驗，掌握localStorage的正確使用方式對於所有網頁開發人員來說都是一個重要的技能。

© Copyright 2023 CLONE CODING