数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法学在 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+ 次浏览
广告