在 JavaScript 中如何从本地存储中检索元素？

让我们讨论如何使用合适的 JavaScript 示例从本地存储中检索元素。

要在 JavaScript 中从本地存储中检索元素，我们使用 `getItem()` 方法，它可以帮助我们访问存储在本地存储对象中的元素。`getItem()` 方法属于存储对象，可以是本地存储对象或会话存储对象。存储在本地存储中的数据是非易失性存储。即使浏览器会话超时或关闭浏览器，数据也会保存在本地存储中。这是本地存储优于会话存储的优势。

要从本地存储中获取元素，首先我们需要创建一个元素并将其存储在本地存储中。稍后，我们可以检索它。本地存储中的方法有 `setItem()`、`getItem()`、`removeItem()` 和 `clear()`。

  • **setItem()** 用于设置本地存储项的值。

  • **getItem()** 用于检索本地存储项。

  • **removeItem()** 用于删除特定的本地存储项。

  • **clear()** 用于删除本地存储中的所有项。

语法

在 JavaScript 中表示从本地存储检索元素的语法为：

localStorage.getItem(‘key name’);

其中，`key` 是单个参数，返回值是字符串。

示例 1

这是一个从 JavaScript 中的本地存储检索元素的示例程序。

<html>
<head>
   <title>Retrieve element from local storage in JavaScript?</title>
</head>
<body style="text-align: center;">
   <p>Retrieving elements from local storage in JavaScript</p>
   <p id="result"></p>
   <script>
      const user = {
         name: 'Raj',
         aadhar_id: '2019 8812 9912',
         age: 18
      }
      localStorage.setItem("user", JSON.stringify(user));
      document.getElementById('result').innerHTML = localStorage.getItem('user');
   </script>
</body>
</html>

上述示例程序的输出为

示例 2

这是一个在本地存储中创建项并检索该项的示例程序。

<html>
<head>
   <title>Retrieve element from local storage in JavaScript?</title>
</head>
<body style="text-align: center;">
   <p>Retrieving elements from local storage in JavaScript</p>
   <p id="result"></p>
   <script>
      let datetime = new Date();
      let time = datetime.toLocaleTimeString();
      localStorage.current_time = time;// Create an element in the Local storage object.
      document.getElementById('result').innerHTML = localStorage.getItem('current_time'); //Retreive the element.
   </script>
</body>
</html>

上述示例程序的输出为：

示例 3

这是一个使用 JavaScript 创建和删除本地存储中项目的示例程序。

<html>
<head>
   <title>Retrieve element from local storage in JavaScript?</title>
</head>
<body style="text-align: center;">
   <p>Retrieving elements from local storage in JavaScript</p>
   <p id="result"></p>
   <script>
      const user = {
         name: 'Raj',
         aadhar_id: '2019 8812 9912',
         age: 18
      }
      localStorage.def_storage_type = 'Local storage'
      localStorage.setItem("user", JSON.stringify(user));
      document.getElementById('result').innerHTML = 'localStorage.getItem("user") : ' + localStorage.getItem("user") +
      '<br/>' + "localStorage.getItem('def_storage_type') : " + localStorage.getItem('def_storage_type') +
      '<br/>'; //Retreive the element.
      localStorage.removeItem('def_storage_type');
      document.getElementById('result').innerHTML += '<br/>' + 'After deleting the element def_storage_type: ' +
      '<br/>' + "localStorage.getItem('def_storage_type') : " + localStorage.getItem('def_storage_type') +'<br/>';
      localStorage.clear();
      document.getElementById('result').innerHTML += '<br/>' +"The data in the Local storage has been cleared using clear()" + '<br/>' +
      "localStorage.getItem('user') : " + localStorage.getItem('user') + '<br/>' +"localStorage.getItem('def_storage_type') : " + localStorage.getItem('def_storage_type');
   </script>
</body>
</html>

执行上述代码后，将生成以下输出。

更新于：2022-12-09

7K+ 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告