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