JavaScript - SessionStorage

JavaScript 中的会话存储

JavaScript 的 sessionStorage 对象是所有当前浏览器中都会出现的 window 对象属性。页面的协议、主机名和端口都与任何 sessionStorage 数据相关联。每个窗口都包含自己的会话存储。JavaScript 的 sessionStorage 方法有助于可靠地存储用户数据。

在 JavaScript 中，我们使用 getItem() 方法获取始终存储在会话存储属性中的元素。存储对象包含 getItem() 方法。它可以是 JavaScript 会话存储对象或本地存储对象。

语法

以下是 JavaScript SessionStorage 的语法 -

window.sessionStorage;

SessionStorage 的方法

要从 JavaScript sessionStorage 中获取元素，我们必须创建该元素并将其保存到会话存储中。我们可以稍后再将其取回。存储对象有四个方法:setItem()、getItem()、removeItem()、key() 和 clean()。

setItem()

用于将信息保存在会话存储项目中。以下是您在代码中使用它的方法 -

sessionStorage.setItem("key", "value");

getItem()

用于检索和显示会话存储项目。以下是您可以在代码中使用它的方法 -

let lastname = sessionStorage.getItem("key");

removeItem()

用于从会话存储中删除特定项目。以下是您在代码中使用它的方法 -

sessionStorage.removeItem("key");

key()

用于获取会话存储中数据项的名称。以下是您在代码中使用它的方法 -

let keyName = sessionStorage.key(index);

clear()

用于清除会话存储中的所有项目。以下是如何将其添加到代码中:-

sessionStorage.clear();

为什么在 JavaScript 中使用 sessionStorage

SessionStorage 有多种使用方式。其中最重要的几点是:

• 网页界面可以保存在会话存储中。

• 当用户稍后返回页面时，您可以使用 sessionStorage 恢复之前保存的用户界面。

• SessionStorage 还可用于在页面之间传输数据，而无需使用隐藏的输入字段或 URL 参数。

主要功能

以下是 JavaScript SessionStorage 的一些主要功能 -

• 临时存储:数据仅在会话期间存储。

• 特定于标签页:数据只能在同一浏览器标签页或窗口中访问。

• 简单的 API:提供用于配置、检索和和移除项目。

• 重新加载期间持久化: 在同一会话中，页面重新加载后数据仍会保留。

• 存储限制: 通常每个源为会话数据提供约 5MB 的存储空间。

示例

以下是一些会话存储的示例 -

示例 1

以下示例展示了如何使用 JavaScript sessionStorage 的 set 和 get items 方法。会话存储对象可以帮助我们创建数组并设置数据。之后，通过调用对象的 getItem() 函数来显示信息。

<html>  
<head>  
<title>Display Data Using sessionStorage in JavaScript</title>  
</head>  
<body style="text-align: center;">  
<h4>Display Data Using sessionStorage in JavaScript</h4>  
<p id="displayStudent"></p>  
<p id="displayTutorial"></p>  

<script>  
   const studentInfo = {  
      name: 'Amit',  
      rollNumber: 41,  
      website: 'Tutorialspoint',  
      learningMode: 'online',  
      age: 20,  
      subject: 'JavaScript'  
   };  

   const tutorialInfo = {  
      subject: 'JavaScript',  
      website: 'Tutorialspoint',  
      mode: 'online',  
      cost: 'Free',  
      targetAudience: 'students and beginners'  
   };  

   // 在 sessionStorage 中设置并显示 studentInfo
   sessionStorage.setItem("studentInfo", JSON.stringify(studentInfo));  
   console.log("Student info saved in sessionStorage.");
   let retrievedStudent = sessionStorage.getItem('studentInfo');  
   document.getElementById('displayStudent').innerHTML = retrievedStudent;  

   // 在 sessionStorage 中设置并显示 tutorialInfo
   sessionStorage.setItem("tutorialInfo", JSON.stringify(tutorialInfo));  
   console.log("Tutorial info saved in sessionStorage.");
   let retrievedTutorial = sessionStorage.getItem('tutorialInfo');  
   document.getElementById('displayTutorial').innerHTML = retrievedTutorial;  
</script>  

</body>  
</html>

输出

这将生成以下结果 -

Display Data Using sessionStorage in JavaScript

{"name":"Amit","rollNumber":37,"website":"Tutorialspoint","learningMode":"online","age":19,"subject":"JavaScript"}

{"subject":"JavaScript","website":"Tutorialspoint","mode":"online","cost":"Free","targetAudience":"students and beginners"}

示例 2

此示例展示了如何使用 JavaScript 会话存储的 set 和 get 方法。要显示日期和时间，我们可以使用对象的 getItem() 方法。数组值使用 get 和 set 方法，而日期值则立即写入数据。

<html>  
<head>  
<title> Display Data Using sessionStorage in JavaScript </title>  
</head>  
<body style="text-align: center;">  
<h4> Display Data Using sessionStorage in JavaScript </h4>  
<p id="displayStudentInfo"></p>  
<p id="displayCurrentTime"></p>  
<script>  
   const learnerDetails = {  
      name: 'Amit',  
      rollNumber: 52,  
      website: 'TutorialsPoint',  
      learningMode: 'online mode',  
      age: 22,  
      subject: 'JavaScript'  
   };  
   
    // 将学生信息存储在 sessionStorage 中
    sessionStorage.setItem("learnerDetails", JSON.stringify(learnerDetails));
    console.log("学习者详细信息已保存在 sessionStorage 中。");
    
    // 检索并显示学生信息
    let retrievedStudentInfo = sessionStorage.getItem('learnerDetails');
    document.getElementById('displayStudentInfo').innerHTML = retrievedStudentInfo;
    
    // 存储并显示当前日期和时间
   let currentDateTime = new Date();  
   sessionStorage.currentDateTime = currentDateTime;  
   console.log("Current date and time saved in sessionStorage.");
   let retrievedDateTime = sessionStorage.getItem('currentDateTime');  
   document.getElementById('displayCurrentTime').innerHTML = retrievedDateTime;  
</script>  

</body>  
</html>

输出

这将导致以下结果 -

Display Data Using sessionStorage in JavaScript
{"name":"Amit","rollNumber":52,"website":"TutorialsPoint","learningMode":"online mode","age":22,"subject":"JavaScript"}
Fri Oct 25 2024 13:14:10

示例 3

这是一个在 HTML 文件中通过 JavaScript 使用 sessionStorage 的示例。sessionStorage 用于在会话生命周期内保存数据，并在浏览器标签页打开期间保持可用。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Session Storage Example</title>
</head>
<body>
   <h1>Session Storage Demo</h1>
   <label for="name">Enter your name:</label>
   <input type="text" id="name" />
   <button onclick="saveName()">Save Name</button>
   <button onclick="showName()">Show Name</button>
   <button onclick="clearName()">Clear Name</button>
   <p id="result"></p>

<script>
   // 在 sessionStorage 中保存名称的函数
   function saveName() {
      let name = document.getElementById('name').value;
      sessionStorage.setItem('userName', name);
      document.getElementById('result').innerText = 'Name saved in session storage!';
   }
   
   // 显示来自 sessionStorage 的名称的函数
   function showName() {
      let name = sessionStorage.getItem('userName');
      if (name) {
         document.getElementById('result').innerText = 'Stored Name: ' + name;
      } else {
         document.getElementById('result').innerText = 'No name found in session storage!';
      }
   }   
   // 从 sessionStorage 中清除名称的函数
   function clearName() {
      sessionStorage.removeItem('userName');
      document.getElementById('result').innerText = 'Name cleared from session storage!';
   }
</script>
</body>
</html>

输出

因此，您需要在浏览器中打开文件。然后输入名称，然后点击"保存名称"。之后，您需要点击"显示名称"来查看存储的名称。点击"清除名称"即可将其从存储中移除。

摘要

sessionStorage 允许您仅存储单个会话的数据。当您关闭浏览器选项卡或窗口时，sessionStorage 数据将自动删除。由于 sessionStorage 是一个存储系统对象，因此您可以使用存储特定的方法来处理其数据。