資料結構
網路
關係型資料庫管理系統 (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+ 次瀏覽
廣告