编辑“︁JavaScript SessionStorage”︁

= JavaScript SessionStorage =

'''SessionStorage''' 是 [[JavaScript]] 浏览器对象模型（BOM）提供的一种客户端存储机制，允许在用户的浏览器会话期间临时存储数据。与 [[LocalStorage]] 不同，SessionStorage 的数据仅在当前浏览器标签页或窗口有效，关闭标签页或窗口后数据会自动清除。它属于 [[Web Storage API]]，适用于存储少量数据（通常限制为 5MB）。

== 基本概念 ==
SessionStorage 提供了一种键值对（key-value）存储方式，数据以字符串形式保存。每个源（协议 + 域名 + 端口）拥有独立的存储空间，不同标签页的 SessionStorage 互不共享。

=== 与 LocalStorage 的区别 ===
{| class="wikitable"
|-
! 特性 !! SessionStorage !! LocalStorage
|-
| 作用域 || 当前标签页 || 整个浏览器
|-
| 生命周期 || 标签页关闭后清除 || 永久存储（除非手动清除）
|-
| 共享性 || 仅限当前标签页 || 所有同源窗口共享
|}

== 基本用法 ==

=== 存储数据 ===
使用 <code>setItem()</code> 方法存储数据：
<syntaxhighlight lang="javascript">
// 存储字符串
sessionStorage.setItem('username', 'JohnDoe');

// 存储对象（需先转为JSON字符串）
const user = { name: 'Alice', id: 123 };
sessionStorage.setItem('userData', JSON.stringify(user));
</syntaxhighlight>

=== 读取数据 ===
使用 <code>getItem()</code> 方法读取数据：
<syntaxhighlight lang="javascript">
// 读取字符串
const username = sessionStorage.getItem('username');
console.log(username); // 输出: "JohnDoe"

// 读取对象
const storedUser = JSON.parse(sessionStorage.getItem('userData'));
console.log(storedUser.name); // 输出: "Alice"
</syntaxhighlight>

=== 删除数据 ===
使用 <code>removeItem()</code> 删除单个条目，或 <code>clear()</code> 清空全部：
<syntaxhighlight lang="javascript">
// 删除特定项
sessionStorage.removeItem('username');

// 清空所有数据
sessionStorage.clear();
</syntaxhighlight>

== 生命周期和事件 ==

SessionStorage 的生命周期可以通过事件监听：
<syntaxhighlight lang="javascript">
// 监听storage事件（注意：仅在其它标签页修改时触发）
window.addEventListener('storage', (event) => {
  if (event.key === 'username') {
    console.log(`值从 ${event.oldValue} 变为 ${event.newValue}`);
  }
});
</syntaxhighlight>

== 实际应用案例 ==

=== 表单临时保存 ===
用户填写表单时，临时保存数据防止意外关闭：
<syntaxhighlight lang="javascript">
// 保存表单数据
document.getElementById('contactForm').addEventListener('input', (e) => {
  const formData = {
    name: document.getElementById('name').value,
    email: document.getElementById('email').value
  };
  sessionStorage.setItem('draftForm', JSON.stringify(formData));
});

// 页面加载时恢复数据
window.addEventListener('DOMContentLoaded', () => {
  const savedData = sessionStorage.getItem('draftForm');
  if (savedData) {
    const formData = JSON.parse(savedData);
    document.getElementById('name').value = formData.name || '';
    document.getElementById('email').value = formData.email || '';
  }
});
</syntaxhighlight>

=== 单页应用状态管理 ===
在单页应用（SPA）中保持临时状态：
<syntaxhighlight lang="javascript">
// 存储当前视图状态
function storeViewState() {
  sessionStorage.setItem('currentView', window.location.hash);
}

// 恢复视图
function restoreViewState() {
  const view = sessionStorage.getItem('currentView');
  if (view) window.location.hash = view;
}
</syntaxhighlight>

== 高级用法 ==

=== 容量检测 ===
以下函数可检测剩余存储空间：
<syntaxhighlight lang="javascript">
function getRemainingSpace() {
  const testKey = 'test';
  try {
    sessionStorage.setItem(testKey, new Array(1024 * 1024).join('a'));
    sessionStorage.removeItem(testKey);
    return '空间充足';
  } catch (e) {
    return '存储空间已满';
  }
}
</syntaxhighlight>

=== 类型安全封装 ===
创建类型安全的包装器：
<syntaxhighlight lang="javascript">
class TypedSessionStorage {
  static get(key) {
    const value = sessionStorage.getItem(key);
    try {
      return JSON.parse(value);
    } catch {
      return value;
    }
  }

  static set(key, value) {
    sessionStorage.setItem(key, 
      typeof value === 'string' ? value : JSON.stringify(value));
  }
}

// 使用示例
TypedSessionStorage.set('config', { darkMode: true });
const config = TypedSessionStorage.get('config');
</syntaxhighlight>

== 限制与注意事项 ==
* 存储限制通常为 5MB（不同浏览器可能不同）
* 仅存储字符串，复杂数据需序列化
* 隐私模式下某些浏览器可能限制使用
* 不适合存储敏感信息
* 同步操作可能影响性能（大量数据时）

== 浏览器兼容性 ==
SessionStorage 被所有现代浏览器支持，包括：
* Chrome 4+
* Firefox 3.5+
* Safari 4+
* Opera 10.5+
* Edge 12+
* Internet Explorer 8+

== 可视化数据流 ==
<mermaid>
sequenceDiagram
    participant User
    participant Browser
    participant SessionStorage

    User->>Browser: 在表单输入数据
    Browser->>SessionStorage: setItem('formData', data)
    User->>Browser: 刷新页面
    Browser->>SessionStorage: getItem('formData')
    SessionStorage-->>Browser: 返回存储的数据
    Browser->>User: 显示之前输入的数据
</mermaid>

== 数学表示 ==
SessionStorage 可以表示为：
<math>
S : K \rightarrow V
</math>
其中：
* <math>K</math> 为键的集合
* <math>V</math> 为值的集合（字符串）
* <math>S</math> 为当前会话的存储函数

== 总结 ==
SessionStorage 是 Web Storage API 的重要组成部分，为临时数据存储提供了简单有效的解决方案。它特别适合需要短暂保存用户状态或表单数据的场景，同时避免了 LocalStorage 的长期存储带来的隐私问题。理解其生命周期限制和适用场景对于正确使用至关重要。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript BOM]]