[经典] Sessionstorage用法?
sessionStorage是HTML5引入的一种本地存储机制,用于在浏览器中暂时保存数据,供同一会话期间的页面之间交互和共享数据使用。与cookie不同,sessionStorage保存的数据不会在每个HTTP请求中都发送到服务器端。
基本用法
存储数据:可以使用setItem()
方法存储数据。参数为键和值,键和值都必须为字符串类型。例如:
sessionStorage.setItem('username', '张三');
获取数据:可以使用getItem()
方法获取存储的数据。参数为键,返回对应的值。例如:
var username = sessionStorage.getItem('username');
console.log(username); // 输出:张三
删除数据:可以使用removeItem()
方法删除已存储的数据。参数为键。例如:
sessionStorage.removeItem('username');
清空数据:可以使用clear()
方法清空所有存储的数据。例如:
sessionStorage.clear();
遍历存储数据:可以使用for循环遍历所有存储的数据。例如:
for (var i = 0; i < sessionStorage.length; i++) {var key = sessionStorage.key(i);var value = sessionStorage.getItem(key);console.log(key, value);
}
特点和应用场景
- 数据容量大:sessionStorage的存储容量通常可以达到5MB左右,比cookie的4KB容量大得多,适合存储大量数据。
- 不影响性能:由于数据存储在客户端,不需要每次请求都携带数据到服务器端,减少了服务器的负担,提高了性能。
- 自动失效:当用户关闭浏览器窗口后,sessionStorage中的数据会自动删除,不会像cookie一样长期保存在用户设备中,保障用户隐私。
- 应用场景:适用于临时保存用户操作的中间状态、表单数据、页面之间的数据传递等。例如,在一个购物网站中,可以使用sessionStorage来保存用户选择的商品信息,然后在结账页面中读取这些信息。