JavaScript >> Javascript 文檔 >  >> React

在 React 中存儲到 localStorage

簡介

在開發輕量級應用程序時——我們可能想要存儲一些數據。如果數據庫是多餘的 - 有一個很好的選擇:localStorage

雖然它不會為了數據庫的目的而取代數據庫,但它確實可以作為一個簡單的基於文件的存儲系統,您可以利用它來存儲易於訪問的數據點。

將數據保存到 localStorage 在 React 中非常簡單:

const [data, setData] = useState([]);

useEffect(() => {
  localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);

如果您不著急並想了解更多有關其工作原理的信息,請繼續閱讀!

什麼是localStorage ?

localStorage 是一個 Web 存儲對象,使開發人員能夠存儲 鍵值對 在網絡瀏覽器中,並確保這些數據在所有頁面刷新後仍然存在,即使用戶關閉或重新啟動瀏覽器 - 並且它沒有到期日期。存儲的鍵值對可以包含任何類型的數據——數組、對象、字符串、數字等等。

但是,這並不能取代數據庫在您的網站和 Web 應用程序中的作用,因為當用戶清除瀏覽器的緩存和本地存儲時數據會丟失 - 最終,它是 本地存儲 並且應該這樣使用。儘管如此,在某些情況下用戶可以使用 localStorage ,比如實現暗模式 功能,持久化用戶的表單輸入值,等等。

localStorage 具有允許我們訪問瀏覽器存儲對象的內置方法。一個例子是 setItem() 方法,它允許我們向 localStorage 添加一個鍵和一個值 ,因此使我們能夠存儲數據。其他方法用於檢索數據 - getItem() , 刪除數據 - removeItem() ,清除所有localStorage 實例 - clear() ,等等。

將數據存儲到localStorage 使用 setItem() 方法

setItem() 方法允許我們將任何數據類型的值保存到 localStorage 通過將值分配給鍵,從而產生 鍵值對 .每當我們想從 localStorage 中檢索它時,該鍵將用於檢索相應的值 .

注意: 為了將數據存儲在 localStorage , 我們必須先將其轉換為 JSON 字符串 使用 JSON.stringify() 功能。當我們要檢索它時,我們將使用 JSON.parse() 解析數據 ,將 JSON 字符串轉換回 JSON 對象 .

在 React 中處理數據時,我們經常使用 hooks 幫助我們存儲/持有它。 Hooks 還可以幫助我們找到上傳數據的位置。這也適用於 localStorage 因為我們將使用 useState()useEffect() 鉤子。這些鉤子很關鍵,因為 useState() hook 用於保存和設置數據,而 useEffect() 默認情況下,在第一次渲染之後以及作為第二個參數傳遞的狀態發生變化時觸發鉤子。

在解釋了基礎之後,下面是我們將用於在 localStorage 中存儲數據的代碼 :

const [data, setData] = useState([]);

useEffect(() => {
  localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);

我們首先創建了一個狀態來保存我們想要存儲在 localStorage 中的數據 ,然後我們創建了一個 useEffect() 鉤子,將狀態作為第二個參數傳遞。這樣,每當狀態發生變化時,localStorage 中的數據 更新為當前值。

我們在 useEffect() 中處理了用於幫助我們進行數據存儲的核心功能 鉤子:

localStorage.setItem('dataKey', JSON.stringify(data));

結論

在本文中,我們學習瞭如何使用 React 鉤子在 React 中使用 localStorage 存儲數據 .如前所述,這永遠不會取代數據庫的角色,而是會幫助我們存儲一些與用戶相關的數據,這些數據可以改善 UI,但並不意味著獨立於瀏覽器進行持久化。


Tutorial JavaScript 教程
  1. Typescript 中的通用中間件模式

  2. 從 API 獲取數據的正確方法

  3. 構建和託管容器化微服務

  4. 我從哪裡開始成為 MERN 或全棧開發人員?

  5. p2p 數據庫 — Hyperbee — 研討會

  6. 剖析 React - 第 1 部分:JSX

  7. 6.18.0 發布

  1. 使用 Redux 工具包的七大理由

  2. 如何在 Firebase 上部署 React 應用

  3. RGB轉十六進制和十六進制轉RGB

  4. 勝利的 JavaScript 哈希映射

  5. 使用 Formik 反應原生表單

  6. 學習 API

  7. 使用 VueJs 在 firebase 中上傳和下載存儲圖像

  1. 組織 React 項目的技巧

  2. 使用 Axios 輕鬆請求

  3. JavaScript 設計模式:裝飾器

  4. 宣布 NSolid 版本 3.8.2