如何在 HTML5 localStorage 中存储对象？

在本教程中，我们将讨论如何在 HTML5 localStorage 中存储对象。借助接口窗口的 localStorage 属性，我们可以访问 Storage 对象并在其中存储数据。

它没有时间限制。因此，存储在其中的数据将保留，直到被显式删除。关闭浏览器不会删除 localStorage 数据。

为了在 localStorage 中存储 JavaScript 对象，我们将研究如何将它们字符串化并解析为 JSON 字符串，然后如何将它们存储在 localStorage 中。

使用 setItem() 方法

此 setItem() 方法用于在 HTML5 localStorage 中存储数据。此方法位于窗口接口的 localStorage 属性下。

语法

window.localStorage.setItem(key, value);

在这里，我们在 setItem(key, value) 方法中使用了两个参数。一个键和一个值。让我们详细了解这些参数。

参数

key − 这是值的唯一标识符。稍后可以使用此唯一标识符从 localStorage 获取值。

value − 这是将保存在 localStorage 中的数据/信息。

示例 1

在这个例子中，首先，我们创建一个名为 objectRegion 的对象，我们将在 localStorage 中存储它。之后，我们定义两个变量：一个键和一个值。变量值包含对象的 JSON 格式。然后使用 setItem()，我们将此键值对设置为 localStorage。这里我们还使用了 getItem() 方法，它将根据提供的键查找值。它返回对应于键的值。然后我们显示它。

<html>
<body>
   <h2> Add an Object to localStorage in HTML5 using setItem() method </h2>
   <label> Object: </label>
   <div id="get-object"> </div>
   <script>
      
      // Creating object
      // this object will be saved to localhost
      const objectRegion = {
         Region: "Asia",
         Country: "India"
      }
      
      // defining key and value
      const key = "object";
      const value = JSON.stringify(objectRegion)
      
      // setting the key-value pair to localhost
      window.localStorage.setItem(key, value);
      
      // Getting the key-value pair using the getItem() method with the key attribute
      // getItem() method is used to get the value from localStorage using key
      let object = window.localStorage.getItem(key);
      
      // Displaying the object.
      let element = document.getElementById("get-object");
      element.innerHTML = object;
   </script>
</body>
</html>

示例 2

在此示例中，我们可以在 localStorage 中存储对象并检索它。我们有两个输入文本框，通过它们我们可以将值存储到 localStorage 中。并且使用键，我们可以检索值。如果键不在 localStorage 中，getItem() 将返回 null 值。

<html>
<body>
   <h2> Set the value to localStorage using setItem() method in an HTML5 </h2>
   <p> Set the key-value pair to localStorage </p>
   <label> Key: </label>
   <input type="text" id="set-key">
   <br> <br>
   <label> Value: </label>
   <input type="text" id="set-value">
   <br> <br>
   <input type="button" value="Set Key-Value" onclick="setKeyValue()">
   <div id="set"> </div>
   <p> Get the value from key </p>
   <label> Enter Key: </label>
   <input type="text" id="get-key">
   <br> <br>
   <div id="get-value"> </div>
   <input type="button" value="Get Value" onclick="getValueFromKey()">
   <div id="get"> </div>
   <script>
      
      // this function will Set Key-value pair to localStorage
      function setKeyValue() {
         
         // Getting the key-value pair from the input box
         let key = document.getElementById("set-key").value;
         let value = document.getElementById("set-value").value;
         
         // Setting the key-value pair to localStorage
         window.localStorage.setItem(key, JSON.stringify(value));
         let text = "";
         text += "<br>Key-Value set.<br> Try with key: ";
         text += key;
         text += " to get the value";
         
         // Displaying the message
         let element = document.getElementById("set");
         element.innerHTML = text;
      }
      
      // This function will get value using the key from localStorage
      function getValueFromKey() {
         let key = document.getElementById("get-key").value;
         
         // Getting the object value from localStorage with key using getItem() method
         let value = window.localStorage.getItem(key);
         let element = document.getElementById("get");
         if (value != null) {
            element.innerHTML = "<br> Value corresponding to key: " + key + " is: " + value;
         } else {
            element.innerHTML = "<br> Key is not in localStorage, try to set key-value pair first!";
         }
      }
   </script>
</body>
</html>

在本教程中，我们了解了如何使用 setItem() 方法在 HTML5 的 localStorage 中存储对象。

更新于: 2022 年 12 月 6 日

1K+ 次浏览

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告