在 JavaScript 中如何從 sessionStorage 獲取資料?
讓我們用 Javascript 的合適示例討論如何獲取資料。
sessionStorage 物件是一個視窗物件屬性,存在於所有現代瀏覽器中。儲存在 sessionStorage 中的任何資料都與頁面的協議、主機名和埠相關聯。每個視窗的 sessionStorage 都是唯一的。sessionStorage 物件是一種非常有助於以安全方式在客戶端保留資料的方法。
要訪問 Javascript 中 sessionStorage 中的元素,我們使用getItem() 方法,它可以幫助我們訪問儲存在 sessionStorage 物件中的元素。getItem() 方法屬於儲存物件。它可以是本地儲存物件或 sessionStorage 物件。要從 sessionStorage 獲取元素,首先我們需要建立一個元素並將其儲存在 sessionStorage 中。稍後,我們可以檢索它。儲存物件的方法是 setItem()、getItem()、removeItem() 和 clear()。
setItem() 用於設定 sessionStorage 項的值。
getItem() 用於檢索 sessionStorage 項。
removeItem() 用於刪除特定的 sessionStorage 項。
clear() 用於刪除 sessionStorage 中的所有項。
語法
在 Javascript 中表示從 sessionStorage 檢索元素的語法為:
sessionStorage.getItem(‘key name’);
其中,key 是單個引數,返回值是字串。
示例 1
這是一個從 sessionStorage 獲取資料的示例程式。
<html>
<head>
<title>Get data from sessionStorage in JavaScript?</title>
</head>
<body style="text-align: center;">
<p>Retreiving data from sessionStorage in JavaScript</p>
<p id="result"></p>
<script>
const Employee = {
name: 'Chatur',
employee_id : 1037,
company_name : 'Facebook',
role : 'Software Developer',
age: 27
}
sessionStorage.setItem("Employee", JSON.stringify(Employee));
document.getElementById('result').innerHTML = sessionStorage.getItem('Employee');
</script>
</body>
</html>
執行上述程式碼後,將生成以下輸出。
示例 2
這是一個在 Javascript 中建立和檢索 sessionStorage 項的示例程式。
<html>
<head>
<title>Retrieve element from Session storage in JavaScript?</title>
</head>
<body style="text-align: center;">
<p>Retrieving elements from Session storage in JavaScript</p>
<p id="result"></p>
<script>
let datetime = new Date();
let time = datetime.toLocaleTimeString();
sessionStorage.current_time = time;// Create an element in the Session storage object.
document.getElementById('result').innerHTML = sessionStorage.getItem('current_time'); //Retreive the element.
</script>
</body>
</html>
執行上述程式碼後,將生成以下輸出。
示例 3
這是一個在 Javascript 中刪除特定項或刪除 sessionStorage 中所有項的示例程式。
<html>
<head>
<title>Retrieve element from Session storage in JavaScript?</title>
</head>
<body style="text-align: center;">
<p>Retrieving elements from session storage in JavaScript</p>
<p id="result"></p>
<script>
const Employee = {
name: 'Chatur',
employee_id : 1037,
company_name : 'Facebook',
role : 'Software Developer',
age: 27
}
sessionStorage.def_storage_type = 'Session storage'
sessionStorage.setItem("Employee", JSON.stringify(Employee));
document.getElementById('result').innerHTML = 'sessionStorage.getItem("Employee") : ' + sessionStorage.getItem("Employee") +'<br/>' + "sessionStorage.getItem('def_storage_type') : " + sessionStorage.getItem('def_storage_type') +'<br/>'; //Retreive the element.
sessionStorage.removeItem('def_storage_type');
document.getElementById('result').innerHTML += '<br/>' + 'After deleting the element def_storage_type: ' +'<br/>' + "sessionStorage.getItem('def_storage_type') : " + sessionStorage.getItem('def_storage_type') +'<br/>';sessionStorage.clear();
document.getElementById('result').innerHTML += '<br/>' +"The data in the Session storage has been cleared using clear()" + '<br/>' +"sessionStorage.getItem('user') : " + sessionStorage.getItem('user') + '<br/>' +"sessionStorage.getItem('def_storage_type') : " + sessionStorage.getItem('def_storage_type');
</script>
</body>
</html>
執行上述程式碼後,將生成以下輸出。
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP