11. 本地存储：localStorage 与 sessionStorage

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

网站主题偏好草稿内容

三、知识点提醒

localStorage 长期保存，sessionStorage 关闭标签页后清除。
只能保存字符串，复杂数据要用 JSON 转换。
存储键名建议加项目名前缀，避免冲突。

四、练习建议

实现输入时自动保存草稿。
增加“恢复默认设置”功能。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/11-storage.js，下面同步展示，方便学习和复制。

// 页面 11：localStorage 保存设置与草稿
const STORAGE_KEY = 'js-pack-user-settings';
const storageTheme = document.querySelector('#p11-theme');
const storageDraft = document.querySelector('#p11-draft');
const storageOutput = document.querySelector('#p11-output');

function getCurrentSettings() {
  return {
    theme: storageTheme.value,
    draft: storageDraft.value,
    savedAt: new Date().toLocaleString()
  };
}

function saveSettings() {
  const settings = getCurrentSettings();
  localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
  storageOutput.textContent = '已保存：\n' + JSON.stringify(settings, null, 2);
}

function loadSettings() {
  const raw = localStorage.getItem(STORAGE_KEY);
  if (!raw) {
    storageOutput.textContent = '暂时没有保存过数据。';
    return;
  }

  const settings = JSON.parse(raw);
  storageTheme.value = settings.theme || 'light';
  storageDraft.value = settings.draft || '';
  storageOutput.textContent = '已读取：\n' + JSON.stringify(settings, null, 2);
}

function clearSettings() {
  localStorage.removeItem(STORAGE_KEY);
  storageDraft.value = '';
  storageOutput.textContent = '本地数据已清除。';
}

document.querySelector('#p11-save').addEventListener('click', saveSettings);
document.querySelector('#p11-load').addEventListener('click', loadSettings);
document.querySelector('#p11-clear').addEventListener('click', clearSettings);
loadSettings();