• 主页

  • 投资

  • IT

    🔥

  • 设计

  • 销售

  • 人

  • 共240篇

    前端 - HTML5

关闭

返回栏目

关闭

返回前端 - HTML5栏目

219 - 本地存储 - sessionStorage - 会话数据的操作

作者：

贺及楼

成为作者

更新日期：2025-02-27 18:15:10

前端 - HTML5 《本地存储 - sessionStorage - 会话数据的操作》

在前端开发中，我们常常需要在客户端临时保存一些数据，比如用户在表单中的输入、页面的滚动位置等。HTML5 提供了两种本地存储机制：localStorage 和 sessionStorage。今天我们就来详细探讨一下 sessionStorage，它主要用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页后数据会被清除。

1. sessionStorage 的基本概念

sessionStorage 是 HTML5 新增的一个会话存储对象，它允许我们在浏览器会话期间（即窗口或标签页打开期间）临时保存数据。与 localStorage 不同，sessionStorage 中的数据仅在当前会话中有效，关闭窗口或标签页后数据会自动清除。

2. sessionStorage 的常用方法和属性

2.1 存储数据：setItem(key, value)

setItem 方法用于将数据存储到 sessionStorage 中，它接受两个参数：key（键）和 value（值）。键和值都必须是字符串类型。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>sessionStorage setItem</title>
  8. </head>
  10. <body>
  11.     <script>
  12.         // 存储数据
  13.         sessionStorage.setItem('username', 'JohnDoe');
  14.         sessionStorage.setItem('age', '30');
  15.         console.log('数据已存储');
  16.     </script>
  17. </body>
  19. </html>

2.2 获取数据：getItem(key)

getItem 方法用于从 sessionStorage 中获取指定键对应的值。如果键不存在，则返回 null。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>sessionStorage getItem</title>
  8. </head>
  10. <body>
  11.     <script>
  12.         // 先存储数据
  13.         sessionStorage.setItem('username', 'JohnDoe');
  15.         // 获取数据
  16.         const username = sessionStorage.getItem('username');
  17.         console.log('用户名:', username);
  19.         // 获取不存在的键
  20.         const nonExistentKey = sessionStorage.getItem('address');
  21.         console.log('不存在的键的值:', nonExistentKey);
  22.     </script>
  23. </body>
  25. </html>

2.3 删除数据：removeItem(key)

removeItem 方法用于从 sessionStorage 中删除指定键对应的数据。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>sessionStorage removeItem</title>
  8. </head>
  10. <body>
  11.     <script>
  12.         // 先存储数据
  13.         sessionStorage.setItem('username', 'JohnDoe');
  15.         // 删除数据
  16.         sessionStorage.removeItem('username');
  18.         // 尝试获取已删除的数据
  19.         const username = sessionStorage.getItem('username');
  20.         console.log('删除后获取用户名:', username);
  21.     </script>
  22. </body>
  24. </html>

2.4 清空所有数据：clear()

clear 方法用于清空 sessionStorage 中的所有数据。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>sessionStorage clear</title>
  8. </head>
  10. <body>
  11.     <script>
  12.         // 先存储一些数据
  13.         sessionStorage.setItem('username', 'JohnDoe');
  14.         sessionStorage.setItem('age', '30');
  16.         // 清空所有数据
  17.         sessionStorage.clear();
  19.         // 尝试获取已清空的数据
  20.         const username = sessionStorage.getItem('username');
  21.         const age = sessionStorage.getItem('age');
  22.         console.log('清空后获取用户名:', username);
  23.         console.log('清空后获取年龄:', age);
  24.     </script>
  25. </body>
  27. </html>

2.5 获取存储数据的数量：length 属性

length 属性返回 sessionStorage 中存储的数据项数量。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>sessionStorage length</title>
  8. </head>
  10. <body>
  11.     <script>
  12.         // 存储一些数据
  13.         sessionStorage.setItem('username', 'JohnDoe');
  14.         sessionStorage.setItem('age', '30');
  16.         // 获取存储数据的数量
  17.         const itemCount = sessionStorage.length;
  18.         console.log('存储的数据项数量:', itemCount);
  19.     </script>
  20. </body>
  22. </html>

3. sessionStorage 的应用场景

  • 表单数据保存：当用户在填写表单时，如果不小心刷新了页面，使用 sessionStorage 可以保存用户之前输入的数据，避免数据丢失。
  • 页面状态管理：比如记录用户在页面中的滚动位置、当前选中的菜单项等，在页面刷新时可以恢复到之前的状态。

4. 总结

方法/属性 描述
setItem(key, value) 存储数据，键和值都必须是字符串
getItem(key) 获取指定键对应的值，若键不存在返回 null
removeItem(key) 删除指定键对应的数据
clear() 清空 sessionStorage 中的所有数据
length 返回 sessionStorage 中存储的数据项数量

通过 sessionStorage，我们可以方便地在浏览器会话期间临时保存和管理数据，为用户提供更好的交互体验。但需要注意的是，由于其数据在关闭窗口或标签页后会被清除，所以只适合存储临时数据。