使用 useLocalStorage Hook 在 React 中管理本地存儲

本文演示了為有效的本地存儲管理構建可重複使用的 react鉤子。 這簡化了您的反應應用程序中的持續數據處理，提供了乾淨且類型的方法。 useLocalStorage

1。本地存儲實用程序功能

在創建鉤子之前，我們構建了用於與

互動的輔助功能：>

localStorage

• ：

  安全地將數據存儲在中。它通過將其記錄到控制台來序列化值並處理潛在錯誤（例如超過存儲限制）。 setItem(key: string, value: unknown) localStorage JSON.stringify

：
• 檢索並從

  中解析數據。 它使用TypeScript Generics（）進行類型安全，如果鍵不存在，則返回getItem<T>(key: string): T | undefined。 包括錯誤處理。 localStorage <T> undefined

：
• >從

  >中刪除鍵值對，也可以使用錯誤處理。 removeItem(key: string) localStorage

  2。
鉤

該解決方案的核心是useLocalStorage鉤：

useLocalStorage

>初始化：

鉤子
• （for

  ）和作為參數。 它使用初始化其狀態，檢查現有數據；如果找不到，它使用key。 localStorage initialValue useState>localStorage>狀態更新（initialValue）：

  此功能同時更新組件的狀態和
>。它接受新值或函數（用於基於先前狀態的更新），以確保同步。

• handleDispatch>狀態清算（localStorage）：

  >
此功能將狀態重置為
• >，並從

  >中刪除項目 clearState >undefined返回值：localStorage掛鉤返回數組：

  ，提供對當前值，更新功能和清晰函數的訪問。

• 3。使用鉤[value, handleDispatch, clearState]

  這是在反應組件中使用
的方法：>

這個示例演示了持續的反功能。 值存儲在中，並且在頁面上倖存下來。

>

useLocalStorage完整代碼（localstorage.ts and uselocalstorage.ts）

<code class="language-javascript">import useLocalStorage from "./useLocalStorage"; // Path to your hook file

function Counter() {
  const [count, setCount, clearCount] = useLocalStorage<number>("counter", 0);

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
      <button onClick={() => setCount((prev) => prev - 1)}>Decrement</button>
      <button onClick={clearCount}>Reset</button>
    </div>
  );
}</code>

>

localStorage.ts 和 useLocalStorage.ts 的完整程式碼在原始輸入中提供，並且保持不變。

結論

這個自訂鉤子提供了一個健全、類型安全且可重複使用的解決方案，用於使用 localStorage 管理 React 應用程式中的持久性資料。 其乾淨的 API 簡化了開發並提高了程式碼的可維護性。

以上是使用 useLocalStorage Hook 在 React 中管理本地存儲的詳細內容。更多資訊請關注PHP中文網其他相關文章！