JavaScript >> Javascript 文檔 >  >> JavaScript

使用 LocalStorage 在瀏覽器中存儲數據

簡介

在 Web 的早期,數據持久性只能通過服務器實現。如今,通過使用 LocalStorage,我們可以將數據存儲在瀏覽器和移動應用程序等客戶端上,而無需與後端應用程序通信。

在本文中,我們將討論開發人員如何使用 cookie 在客戶端上存儲數據,以及 LocalStorage 如何改進這種體驗。然後我們將查看從 LocalStorage 存儲和檢索數據的函數。最後,我們將討論何時適合使用 LocalStorage。

使用 Cookie 在瀏覽器中存儲數據

Cookie 是存儲在客戶端中的文本數據。它們傳統上由服務器設置,但是,它們也可以在瀏覽器中使用 JavaScript 代碼創建。 cookie 中的數據存儲為字符串的鍵/值對。

當發出 HTTP 請求時,所有 cookie 都會發送到服務器。當發出 HTTP 請求時,您使用 JavaScript 製作的 Cookie 也會發送到服務器。這意味著服務器應用程序可能會無意中修改 cookie,從而導致您的客戶端應用程序出現意外行為。

使用 cookie,您最多只能在客戶端存儲 4KB 的數據。對於現代前端應用來說,這可能還不夠。

讓我們看看 LocalStorage 如何讓我們在客戶端創建和保存數據,其存儲空間比 cookie 提供的更多。

什麼是本地存儲?

LocalStorage 是在用戶瀏覽器上可用的鍵/值數據存儲。與 cookie 一樣,LocalStorage 只能存儲其鍵和值的字符串數據。數據存儲區只能由該域內的 JavaScript 訪問。

每個域最多可以在 LocalStorage 中存儲 5MB 的數據。此外,當發出 HTTP 請求時,我們的數據不會發送到服務器。

LocalStorage 中的數據沒有過期時間。可以通過 JavaScript 或清除瀏覽器緩存來刪除它。

現在我們知道了 LocalStorage 是什麼,讓我們使用它的 API 來管理瀏覽器中的數據。

如何使用本地存儲

我們可以在全局 localStorage 上使用以下方法 管理客戶端數據的對象:

方法 說明
setItem() 在 LocalStorage 中添加鍵/值
getItem() 從 LocalStorage 中獲取值
removeItem() 按其鍵刪除項目
clear() 從 LocalStorage 中刪除所有項目
key() 從 LocalStorage 中獲取項目的密鑰

setItem()

使用 setItem() 在 LocalStorage 中存儲項目的函數。此函數將鍵作為其第一個參數,將一個值作為第二個參數。如前所述,兩者都必須是字符串。

在瀏覽器的控制台中,讓我們添加一個項目到我們的 localStorage

localStorage.setItem("tech", "JavaScript");

getItem()

使用 getItem() 從 LocalStorage 中檢索數據的函數。該函數將保存數據時使用的鍵作為參數。

在您的控制台中,讓我們檢索並打印之前使用 setItem() 保存的值 :

let techStack = localStorage.getItem("tech");
console.log(techStack);

你的控制台應該打印“JavaScript”。

removeItem()

使用 removeItem() 從 LocalStorage 中刪除一項的功能。您需要提供要刪除的項目的鍵作為參數。

在您的控制台中嘗試此操作以刪除使用 setItem() 保存的數據 :

localStorage.removeItem("tech");

要確認它已被刪除,請嘗試再次檢索它:

console.log(localStorage.getItem("tech"));

控制台將輸出“null”為 getItem() 返回 null 每當它無法檢索項目時。

清除()

要刪除存儲在 LocalStorage 中的所有數據,請使用 clear() 功能:

localStorage.clear();

key()

key() 函數允許我們通過索引檢索保存在 LocalStorage 中的項目的鍵。瀏覽器為添加到 LocalStorage 的每個項目創建一個整數索引。

由於我們不生成此索引,因此我們不應該使用索引直接檢索鍵。但是,我們可以使用這個函數來獲取存儲在 LocalStorage 中的所有密鑰:

for (let i = 0; i < localStorage.length; i++) {
    let storedValue = localStorage.key(i);
    console.log(`Item at ${i}: ${storedValue}`);
}

通過使用 length LocalStorage 的屬性,我們遍歷創建的每個索引以打印我們保存在 LocalStorage 中的所有鍵。然後我們可以將這些鍵與 getItem() 一起使用 檢索所有存儲的數據。

現在我們已經介紹了在用戶瀏覽器中管理數據的所有功能,讓我們看看保存複雜對象而不是字符串數據的特殊情況。

在LocalStorage中存儲對象

LocalStorage 只能將字符串用作其鍵和值。如果我們嘗試存儲任何其他類型的數據,它會在存儲之前將其轉換為字符串。當我們想要保存 JavaScript 對象時,這可能會帶來一些意想不到的行為。

讓我們創建一個 person 瀏覽器控制台中的對象並將其保存在 LocalStorage 中:

let person = {
    name: "John",
    age: 22
};

localStorage.setItem("profile", person);

現在,setItem() 會轉換 person 反對一個字符串。當我們檢索到 person 像這樣:

console.log(localStorage.getItem("profile"));

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

我們的瀏覽器控制台會顯示:

JavaScript 的對像到字符串的轉換產生 [object Object] .誠然,取回一個只表示存儲了一個對象的字符串是沒有用的。

為了在 LocalStorage 中正確存儲 JavaScript 對象,我們首先需要將我們的對象轉換為 JSON 字符串。

我們使用內置的 JSON.stringify() 為此發揮作用。該函數的結果字符串將包含我們 JSON 對象的所有屬性。當我們使用 setItem() 時,我們保存該函數的輸出 .

讓我們保存 person 字符串化後的對象:

localStorage.setItem("profile", JSON.stringify(person));

要將這些數據作為對象檢索,我們需要做兩件事。首先,我們需要使用 getItem() 從 LocalStorage 中提取它。然後我們需要將 JSON 字符串轉換為 JavaScript 對象。

讓我們從 LocalStorage 中獲取項目開始:

let storageProfileString = localStorage.getItem("profile");
console.log("String saved in LocalStorage", storageProfileString);

現在,使用 JSON.parse() 將 LocalStorage 字符串轉換為對象 並將其記錄到瀏覽器的控制台:

let savedPerson = JSON.parse(storageProfileString);
console.log("Person object:", savedPerson);
console.log("Person's name:", savedPerson.name);

運行此代碼將為您提供以下輸出:

注意當我們第一次記錄字符串到記錄對象時控制台中的顏色差異。我們還記錄了 name person 的屬性 以確保對象的屬性仍然可以訪問。

現在我們有了將 LocalStorage 的用途擴展到字符串之外的策略,讓我們討論一下使用它時的最佳實踐。

何時使用 LocalStorage

LocalStorage 允許在您的網站上進行基本的持久性。它通常用於保存即使刷新瀏覽器也便於用戶查看的數據。例如,許多表單在提交之前將用戶的輸入保存在 LocalStorage 中。

靜態網站通常使用 LocalStorage 來存儲用戶偏好,例如 UI 主題。如果沒有 Web 服務器和數據庫來保存用戶首選項,LocalStorage 允許他們繼續使用您的網站進行自定義。

但是,LocalStorage 不應該用於大量數據。除了 5MB 的限制對於數據密集型應用程序可能不夠用外,大數據在使用 LocalStorage 時會帶來性能成本。

所有 LocalStorage 函數都是同步操作。因此,如果您要保存或檢索大量數據,JavaScript 必須先完成該 LocalStorage 操作,然後才能執行其他代碼。

請注意,保存大型 JSON 對象時會增加性能成本。 JSON.stringify()JSON.parse() 功能也是同步的。它們將阻止 JavaScript 執行,直到它們完成。

切勿在 LocalStorage 中存儲敏感信息 .這包括密碼、API 密鑰、JWT 等身份驗證令牌和信用卡號等財務信息等等。

請記住,在您的域中加載的每個 JavaScript 文件都可以訪問 LocalStorage。如果您或您的依賴項添加了惡意 JavaScript 代碼,它們可以檢索您用於通過 API 進行身份驗證的用戶數據或令牌。

始終將敏感數據保留在後端。

結論

LocalStorage 是瀏覽器中可用的數據存儲。數據存儲為字符串的鍵/值對,每個域都可以訪問其 LocalStorage。

存儲 JavaScript 對象時,請務必使用 JSON.stringify() 將其正確轉換為字符串 在保存之前。在檢索數據時,將它們轉換為具有 JSON.parse() 的對象 .

使用 LocalStorage 時,請避免處理大量數據,因為它的功能是同步的,這可能會降低性能。最重要的是,確保沒有敏感的用戶或應用程序數據存儲在 LocalStorage 中。

你能想出用 LocalStorage 改進你的應用程序的方法嗎?!


Tutorial JavaScript 教程
  1. #Hacktoberfest2020 與 XenoX 團隊一起 - 一起來吧!

  2. #30DaysOfAppwrite :Appwrite 儀表板

  3. 為 2020 年刷新我的博客

  4. React.js 庫引領網站開發的多功能行為的秘訣是什麼?

  5. p5-Svelte:在 Svelte 中使用 p5 的快速簡便的方法! 🕸🧙‍♂️

  6. 在 JavaScript 中使用單個值初始化數組 |示例代碼

  7. R2 2022 中的新增功能與 Kendo UI

  1. 了解微前端

  2. 如何修復 localhost 中的 react cors 錯誤?

  3. React.js TypeError:無法讀取 null 的屬性“地圖”

  4. 故事書未顯示樣式

  5. 比較 2020 年最好的前端 JavaScript 框架

  6. React 搜索欄:讓我們在 React 中構建一個搜索欄!

  7. React 鉤子:useSessionStorage 和 useLocalStorage

  1. 如何在 Swift 中創建框架

  2. 解鎖前端 - 調用標準化組件 API pt.1

  3. React Router hooks 會讓你的組件更乾淨

  4. jQuery 個人資料圖片抓取插件