编辑“︁HTML会话存储”︁

{{DISPLAYTITLE:HTML会话存储}}

'''HTML会话存储'''（Session Storage）是HTML5提供的一种客户端存储机制，允许网页在用户的浏览器会话期间存储键值对数据。与[[localStorage]]不同，会话存储的数据仅在当前浏览器标签页或窗口有效，关闭后自动清除。本文详细介绍其工作原理、API使用及实际应用场景。

== 概述 ==
会话存储是Web Storage API的一部分，设计用于临时保存用户会话期间需要的数据。主要特点包括：
* '''作用域限制'''：数据仅在当前标签页/窗口可用（同源策略下）
* '''生命周期'''：数据在会话结束（标签关闭）时自动删除
* '''存储限制'''：通常为5MB（因浏览器而异）
* '''同步操作'''：所有操作均为同步执行

数学上可表示为存储函数：
<math>
S: K \rightarrow V \quad \text{其中} \quad K \in \text{String}, V \in \text{String}
</math>

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

// 存储对象（需序列化）
const userSettings = { theme: 'dark', fontSize: 14 };
sessionStorage.setItem('preferences', JSON.stringify(userSettings));
</syntaxhighlight>

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

// 读取对象
const preferences = JSON.parse(sessionStorage.getItem('preferences'));
// { theme: 'dark', fontSize: 14 }
</syntaxhighlight>

=== 删除数据 ===
<syntaxhighlight lang="javascript">
// 删除特定项
sessionStorage.removeItem('username');

// 清空所有存储
sessionStorage.clear();
</syntaxhighlight>

== 生命周期演示 ==
<mermaid>
sequenceDiagram
    participant User
    participant Browser
    User->>Browser: 打开网页
    Browser->>SessionStorage: 初始化存储
    User->>Browser: 交互操作（存储数据）
    Browser->>SessionStorage: setItem()
    User->>Browser: 关闭标签页
    Browser->>SessionStorage: 自动清除数据
</mermaid>

== 实际应用案例 ==
=== 表单暂存 ===
当用户填写多页表单时，临时保存已输入内容：
<syntaxhighlight lang="javascript">
// 保存表单数据
document.getElementById('multiPageForm').addEventListener('input', (e) => {
    sessionStorage.setItem(e.target.name, e.target.value);
});

// 恢复数据
window.addEventListener('load', () => {
    Array.from(document.elements).forEach(element => {
        if (element.name) {
            element.value = sessionStorage.getItem(element.name) || '';
        }
    });
});
</syntaxhighlight>

=== 单页应用状态管理 ===
在SPA中保持视图状态：
<syntaxhighlight lang="javascript">
// 存储当前视图状态
function storeViewState() {
    sessionStorage.setItem('activeTab', currentTab.id);
    sessionStorage.setItem('scrollPosition', window.scrollY);
}

// 恢复状态
window.addEventListener('load', () => {
    const tab = sessionStorage.getItem('activeTab');
    if (tab) document.getElementById(tab).click();
    
    const scrollPos = sessionStorage.getItem('scrollPosition');
    window.scrollTo(0, scrollPos || 0);
});
</syntaxhighlight>

== 高级特性 ==
=== 存储事件监听 ===
可监听同源其他标签页的存储变化：
<syntaxhighlight lang="javascript">
window.addEventListener('storage', (event) => {
    if (event.storageArea === sessionStorage) {
        console.log(`键 ${event.key} 已修改`, event.newValue);
    }
});
</syntaxhighlight>

=== 容量检测 ===
通过异常处理检测存储空间：
<syntaxhighlight lang="javascript">
function testStorageSpace() {
    try {
        const testData = new Array(1024 * 1024 * 4).join('a');
        sessionStorage.setItem('test', testData);
        sessionStorage.removeItem('test');
        return true;
    } catch (e) {
        return false;
    }
}
</syntaxhighlight>

== 注意事项 ==
* '''数据类型限制'''：仅支持字符串，存储对象需使用<code>JSON.stringify()</code>
* '''同步性能'''：频繁操作可能影响页面响应
* '''隐私模式'''：某些浏览器在隐私模式下会限制或清除存储
* '''安全性'''：不应存储敏感信息，易受XSS攻击

== 浏览器兼容性 ==
所有现代浏览器均支持sessionStorage，包括：
* Chrome 4+
* Firefox 3.5+
* Safari 4+
* IE 8+
* Edge 12+

== 参见 ==
* [[Web Storage API]]
* [[localStorage]]
* [[IndexedDB]]

{{WebAPIRef}}

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML高级特性]]