在 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