巧用 JavaScript sessionStorage 提升网页体验

你在填表单的时候，是不是遇到过页面刷新后所有内容都清空了？这种体验挺烦人的。其实，ref="/tag/137/" style="color:#B2A89E;font-weight:bold;">JavaScript 的 sessionStorage 就是为解决这类问题而生的。

什么是 sessionStorage

sessionStorage 是浏览器提供的一种存储机制，能在当前会话中保存数据。只要不关闭标签页，哪怕刷新页面，数据也不会丢失。它和 localStorage 很像，但生命周期更短——一旦关闭页面，数据自动清除。

比如你在一个购物网站浏览商品，临时记下几款想比价的型号，用 sessionStorage 存一下，跳转几次页面再回来还能看到，关掉就清，干净利落。

基本用法很简单

存数据用 setItem，读数据用 getItem，删用 removeItem。语法清晰，上手快。

sessionStorage.setItem('username', '小明');
const name = sessionStorage.getItem('username');
console.log(name); // 输出：小明

可以存字符串、数字，甚至对象——只要先转成 JSON 字符串就行。

const user = { id: 1, name: '小红' };
sessionStorage.setItem('currentUser', JSON.stringify(user));

const savedUser = JSON.parse(sessionStorage.getItem('currentUser'));
console.log(savedUser.name); // 输出：小红

实际场景：记住表单输入

想象你正在填写一个长长的报名表，中间不小心刷新了页面，前面的努力白费。加几行代码就能避免这种情况。

const form = document.getElementById('myForm');
const input = document.getElementById('message');

// 页面加载时尝试恢复数据
if (sessionStorage.getItem('formMessage')) {
  input.value = sessionStorage.getItem('formMessage');
}

// 输入时实时保存
input.addEventListener('input', function() {
  sessionStorage.setItem('formMessage', input.value);
});

// 表单提交后可选择清除
form.addEventListener('submit', function() {
  sessionStorage.removeItem('formMessage');
});

这样一来，用户操作更顺畅，也不用担心误刷新导致信息丢失。

注意点要留心

sessionStorage 只在同源同标签页内有效。跨域不行，iframe 里也受限。另外，别指望它存大文件，容量一般限制在5-10MB之间，超出会报错。

还有，它只认字符串。直接塞个数组或对象进去，结果会变成 [object Object] 这种无效值，记得用 JSON 转换。