如何利用Session Storage保存单页应用的用户页面位置？

当然可以！Session Storage正好是解决这个问题的完美工具——它会在当前浏览器标签的会话周期内保存数据，刷新页面也不会丢失，完全匹配你想要的“刷新后停留在最后位置”的需求。下面是用原生JS实现的具体方案：

1. 点击展开时保存状态到Session Storage #

当用户点击主按钮展开内容时，我们需要把当前激活元素的标识（比如它的id）和body的类状态存入Session Storage。假设你的按钮和对应展开元素通过data-target属性关联（按钮的data-target指向展开元素的id），可以这样写：

// 获取所有主按钮
const mainButtons = document.querySelectorAll('.main-button');

mainButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 先清除之前的激活状态
    document.querySelectorAll('.content-element.active').forEach(el => el.classList.remove('active'));
    document.body.classList.remove('has-expand');

    // 激活当前目标元素
    const targetId = button.dataset.target;
    const targetElement = document.getElementById(targetId);
    targetElement.classList.add('active');
    document.body.classList.add('has-expand');

    // 把状态存入Session Storage
    sessionStorage.setItem('activeContentId', targetId);
    sessionStorage.setItem('bodyHasExpand', 'true');
  });
});

2. 页面加载时恢复状态 #

页面刷新后，我们需要在DOM加载完成后读取Session Storage里的保存状态，然后恢复到之前的展开状态：

document.addEventListener('DOMContentLoaded', () => {
  // 读取保存的状态
  const activeContentId = sessionStorage.getItem('activeContentId');
  const bodyHasExpand = sessionStorage.getItem('bodyHasExpand') === 'true';

  // 如果有有效状态，就恢复
  if (activeContentId && bodyHasExpand) {
    const targetElement = document.getElementById(activeContentId);
    if (targetElement) {
      targetElement.classList.add('active');
      document.body.classList.add('has-expand');
    }
  }
});

3. 处理收起/关闭的情况 #

如果用户有收起内容的操作（比如点击关闭按钮或再次点击主按钮），别忘了同步更新Session Storage，清除已保存的状态：

// 示例：支持再次点击主按钮收起内容
mainButtons.forEach(button => {
  button.addEventListener('click', () => {
    const targetId = button.dataset.target;
    const targetElement = document.getElementById(targetId);
    const isAlreadyActive = targetElement.classList.contains('active');

    // 先清除所有激活状态
    document.querySelectorAll('.content-element.active').forEach(el => el.classList.remove('active'));
    document.body.classList.remove('has-expand');

    if (!isAlreadyActive) {
      // 展开逻辑，保存状态
      targetElement.classList.add('active');
      document.body.classList.add('has-expand');
      sessionStorage.setItem('activeContentId', targetId);
      sessionStorage.setItem('bodyHasExpand', 'true');
    } else {
      // 收起逻辑，清除状态
      sessionStorage.removeItem('activeContentId');
      sessionStorage.removeItem('bodyHasExpand');
    }
  });
});

为什么选Session Storage？ #

Session Storage的数据仅在当前浏览器标签的会话中存在，用户关闭标签后数据会自动清除，完美适配“刷新保留、关闭重置”的场景。如果用Local Storage，数据会长期保存在用户浏览器中，下次打开页面还会恢复到之前的状态，可能不符合你的预期。

内容的提问来源于stack exchange，提问作者Giacomo Ciampoli