HTML 会话存储
介绍
在现代Web开发中，存储数据是一个常见的需求。HTML5引入了两种客户端存储机制：localStorage和sessionStorage。本文将重点介绍sessionStorage，它是一种在浏览器会话期间临时存储数据的机制。
会话存储：sessionStorage允许你在浏览器会话期间存储数据。当用户关闭浏览器标签或窗口时，存储的数据将被清除。
什么是会话存储？
sessionStorage是HTML5提供的一种Web存储API，它允许你在浏览器中存储键值对数据。与localStorage不同，sessionStorage的数据仅在当前浏览器会话期间有效。一旦用户关闭浏览器标签或窗口，存储的数据将被自动删除。
适用场景：sessionStorage非常适合存储临时数据，例如表单数据、用户偏好设置或页面状态信息。
如何使用会话存储？
1. 存储数据
你可以使用sessionStorage.setItem(key, value)方法将数据存储到sessionStorage中。key和value都必须是字符串。
sessionStorage.setItem('username', 'Alice');
2. 获取数据
使用sessionStorage.getItem(key)方法可以获取存储在sessionStorage中的数据。
let username = sessionStorage.getItem('username');
console.log(username); // 输出: Alice
3. 删除数据
如果你想删除某个键值对，可以使用sessionStorage.removeItem(key)方法。
sessionStorage.removeItem('username');
4. 清空所有数据
使用sessionStorage.clear()方法可以清空sessionStorage中的所有数据。
sessionStorage.clear();
实际案例
假设你正在开发一个在线表单，用户需要在多个页面之间填写信息。你可以使用sessionStorage来临时存储用户在每个页面填写的数据，直到用户提交表单。
// 页面1：存储用户姓名
sessionStorage.setItem('name', 'Bob');
// 页面2：存储用户邮箱
sessionStorage.setItem('email', '[email protected]');
// 页面3：获取并显示用户信息
let name = sessionStorage.getItem('name');
let email = sessionStorage.getItem('email');
console.log(`Name: ${name}, Email: ${email}`);
注意：sessionStorage的数据仅在当前浏览器标签或窗口中有效。如果用户在新标签或窗口中打开同一页面，sessionStorage将为空。
总结
sessionStorage是HTML5提供的一种简单而强大的客户端存储机制，适合存储临时数据。它的数据仅在当前浏览器会话期间有效，适合用于存储表单数据、用户偏好设置等临时信息。
练习
- 创建一个简单的网页，使用
sessionStorage存储用户的姓名，并在另一个页面中显示该姓名。 - 尝试使用
sessionStorage存储一个对象，并思考如何将对象转换为字符串进行存储。
let user = { name: 'Charlie', age: 25 };
sessionStorage.setItem('user', JSON.stringify(user));
let storedUser = JSON.parse(sessionStorage.getItem('user'));
console.log(storedUser);
通过这些练习，你将更好地理解sessionStorage的使用场景和限制。