在 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>

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

更新于:2022年12月9日

14K+ 浏览量

启动您的 职业生涯

完成课程后获得认证

开始学习
广告
© . All rights reserved.