在 React 中使用 localStorage 持久化狀態

1. React 中的 localStorage 是什麼
2. 在 React 中使用 localStorage 方法
3. React 中 localStorage 的實際示例

單頁應用程式今天非常流行，主要是因為它們的速度和卓越的使用者體驗。存在許多用於構建 SPA 的庫和框架，但 React 是最流行的；它利用 Virtual DOM 使用頁面的最新和最新版本更新螢幕。

在 React 中，狀態是一個重要的概念，因為狀態或 props 的變化會觸發特定元件的重新渲染。有很多方法可以維護狀態並更新其值。

一種方法是使用一個簡單的狀態物件來維護這些值。一個更高階的選項是將狀態持久化到 localStorage。

React 開發人員使用諸如 redux 之類的庫來管理複雜專案的狀態。在本文中，我們想探索 localStorage 方法。

React 中的 localStorage 是什麼

簡而言之，localStorage 是瀏覽器的一項功能，用於儲存或持久化資料以供以後使用。例如，如果你在 React 應用程式中維護一個常規的 state 物件，則在關閉選項卡或整個瀏覽器後就不可能維護 state 值。

即使你關閉瀏覽器，localStorage 也會保留資料，因此非常適合在你構建應用程式或想要在 React 中構建本地 JavaScript 應用程式時保留資料。例如，如果你有一個待辦事項應用程式，你不希望在關閉應用程式時丟失有關待辦事項的所有資料。

你可以使用 localStorage 確保即使你關閉瀏覽器也不會丟失資料。

你可以將 localStorage 與類元件和功能元件一起使用。更新類元件狀態的主要方法是 setState() 方法。

我們在功能元件中有 useState() 鉤子，建立一個狀態變數和一個更新函式。

在 React 中使用 localStorage 方法

通常 React 開發人員使用 localStorage 來儲存他們想要在應用程式中持久儲存的鍵值資料。有一個特定的 API 用於維護 localStorage 中的值。

localStorage 最常見的操作之一是使用 localStorage.setItem() 方法建立具有鍵值對的記錄。它接受兩個字串作為引數：代表鍵值和一個代表值本身。

例如，localStorage.setItem('Name', 'George') 將建立一個具有 Name: George 鍵值對的資料記錄。localStorage.getItem() 方法接受一個字串引數來表示鍵，它允許我們讀取該鍵的值。

例如，我們可以像這樣讀取 Name 鍵的值：localStorage.getItem('Name')。

你還可以使用 localStorage.removeItem() 方法刪除特定的鍵值對。它接受一個引數，字串值，以表示必須刪除的 key 值。

例如，localStorage.removeItem('Name') 將刪除我們最近新增的鍵值對。最後，localStorage.clear() 方法不需要任何引數，並且會自動清除 localStorage 中的每個鍵值對。

React 中 localStorage 的實際示例

讓我們探索一下 React 中 localStorage 的實際好處，並構建一個簡單的應用程式來響應使用者的操作並相應地更改元素的樣式。

但是，你必須考慮到 localStorage 不是 React 的內建功能。如果你在 React 中更新常規狀態值，元件將自動重新渲染。

但是，更改 localStorage 物件鍵的值不會自動更新元件。相反，我們可以使用 API 上的 getItem() 方法從 localStorage 讀取值。

如果你檢視 CodeSandbox 上的演示，你會發現更改 localStorage 後不會立即可見。為確保你的應用立即響應使用者的輸入，你需要更新本地狀態值。

在這種情況下，我們有一個功能元件，因此我們使用 useState 掛鉤來建立狀態變數和更新它的函式。然後我們定義一個事件處理程式，它同時更新 localStorage 中的值和本地狀態變數。

import { useState } from "react";
export default function App() {
  const [bgColor, setBgColor] = useState("");
  const handleClick = (color) => {
    localStorage.setItem("color", color);
    setBgColor(color);
  };
  return (
    <div
      style={{ backgroundColor: localStorage.getItem("color"), height: 500 }}
    >
      <button onClick={() => handleClick("pink")}>Pink</button>
      <button onClick={() => handleClick("blue")}>Blue</button>
      <button onClick={() => handleClick("purple")}>Purple</button>
    </div>
  );
}

即使我們從未直接讀取狀態值，我們仍然需要對其進行更新，以確保使用 localStorage 中的最新值重新渲染元件。