了解 JavaScript 中的本機存儲

本地儲存是一個重要的基於瀏覽器的API，允許開發人員直接在瀏覽器中儲存、檢索和管理資料。與會話儲存不同，本地儲存即使在瀏覽器關閉後仍然存在，因此非常適合保存使用者首選項、應用程式設定或需要在會話之間保留的任何類型的資料。然而，值得注意的是，資料僅限於儲存它的瀏覽器。例如，Chrome 中儲存的資料將無法在 Firefox 中使用。

本地儲存的工作原理

在使用本地儲存之前，了解它以 JSON 格式 儲存資料非常重要。這意味著，如果您要儲存 JavaScript 對象，則需要先將其轉換為 JSON，然後在檢索資料時將其轉換回 JavaScript 物件。

這是一個例子：

const user = {
  name: "AliceDoe"
};
const userToJSON = JSON.stringify(user); // Convert object to JSON

在瀏覽器中查看本機存儲

您可以使用瀏覽器的開發者工具查看本地儲存中儲存的資料並與之互動。這是一個快速指南：

1. 右鍵點選任意網頁並選擇「檢查」或按 F12。
2. 開啟應用程式選項卡。
3. 在左側面板中，在儲存部分下找到本地儲存，您將看到儲存的資料以鍵值對的形式顯示。

在本機儲存中建立新記錄

要將資料儲存在本機儲存中，請依照下列步驟操作：

const user = {
  name: "AliceDoe"
};

const userToJSON = JSON.stringify(user); // Convert to JSON
localStorage.setItem("user", userToJSON); // Save the item

在此範例中：

• 鍵是「使用者」。
• 值是JSON格式的字串化物件。

從本地存儲讀取數據

當您從本機儲存檢索資料時，您需要將 JSON 字串轉換回 JavaScript 物件：

const userJSON = localStorage.getItem("user"); // Retrieve data
const userObject = JSON.parse(userJSON); // Convert back to JS object
console.log(userObject); // { name: "AliceDoe" }

更新本地儲存中的現有數據

更新本機儲存中的資料類似於建立新記錄 - 本質上，您覆蓋舊資料：

const updatedUser = {
  name: "AliceDoe",
  age: 25
};

const updatedUserJSON = JSON.stringify(updatedUser);
localStorage.setItem("user", updatedUserJSON); // Overwrite the record

刪除本地儲存中的數據

最後，要從本機儲存中刪除記錄，您可以使用removeItem方法：

localStorage.removeItem("user"); // Remove the "user" record

這將刪除與「user」鍵關聯的記錄。

結論

本地儲存是一個強大、易於使用的 JavaScript 用戶端資料持久化工具。透過了解如何建立、讀取、更新和刪除記錄，您可以儲存跨瀏覽器會話持續存在的重要數據，從而增強使用者體驗。然而，同樣重要的是要記住，本地儲存僅限於特定的瀏覽器和網域，並且不應該用於敏感數據，因為它沒有加密。

透過將本機儲存合併到您的應用程式中，您可以改進其功能，而無需為某些任務提供完整的後端解決方案。

---

引用：

• MDN Web 文檔，“LocalStorage”，https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

以上是了解 JavaScript 中的本機存儲的詳細內容。更多資訊請關注PHP中文網其他相關文章！