编辑“︁HTML本地存储交互”︁（章节）

= HTML本地存储交互 =

'''HTML本地存储交互'''是指通过JavaScript操作浏览器提供的本地存储API（如localStorage和sessionStorage），实现网页数据的持久化或会话级存储。这种技术允许开发者在不依赖服务器的情况下，直接在用户浏览器中存储和检索数据，适用于用户偏好设置、表单数据暂存等场景。

== 存储机制概述 ==

浏览器提供两种主要的本地存储对象：

* '''localStorage''' - 持久化存储，数据除非手动清除否则永久保留
* '''sessionStorage''' - 会话级存储，数据在浏览器标签页关闭时自动清除

两者都遵循同源策略，存储上限通常为5MB（因浏览器而异）。

<mermaid>
graph TD
    A[Web Storage] --> B[localStorage]
    A --> C[sessionStorage]
    B --> D[永久存储]
    C --> E[会话存储]
</mermaid>

== 基本操作 ==

=== 存储数据 ===
使用<code>setItem()</code>方法：

<syntaxhighlight lang="javascript">
// 存储字符串
localStorage.setItem('username', 'JohnDoe');

// 存储对象需要先序列化
const userSettings = { theme: 'dark', fontSize: 14 };
localStorage.setItem('settings', JSON.stringify(userSettings));
</syntaxhighlight>

=== 读取数据 ===
使用<code>getItem()</code>方法：

<syntaxhighlight lang="javascript">
// 读取字符串
const username = localStorage.getItem('username'); // 返回 "JohnDoe"

// 读取对象需要反序列化
const settings = JSON.parse(localStorage.getItem('settings'));
console.log(settings.theme); // 输出 "dark"
</syntaxhighlight>

=== 删除数据 ===
使用<code>removeItem()</code>清除特定项，或<code>clear()</code>清空全部：

<syntaxhighlight lang="javascript">
// 删除单个项
localStorage.removeItem('username');

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

== 高级特性 ==

=== 存储事件监听 ===
当其他窗口修改存储时触发事件：

<syntaxhighlight lang="javascript">
window.addEventListener('storage', (event) => {
    console.log(`键名: ${event.key}`);
    console.log(`旧值: ${event.oldValue}`);
    console.log(`新值: ${event.newValue}`);
    console.log(`触发页面URL: ${event.url}`);
});
</syntaxhighlight>

=== 容量检测 ===
计算已用空间（近似值）：

<syntaxhighlight lang="javascript">
function getUsedSpace() {
    let total = 0;
    for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        const value = localStorage.getItem(key);
        total += key.length + value.length;
    }
    return total * 2; // UTF-16字符占2字节
}
</syntaxhighlight>

== 实际应用案例 ==

=== 用户偏好保存 ===
保存主题设置并在页面加载时应用：

<syntaxhighlight lang="html">
<script>
// 保存偏好
function saveTheme(theme) {
    localStorage.setItem('preferredTheme', theme);
    applyTheme(theme);
}

// 应用主题
function applyTheme(theme) {
    document.body.className = theme;
}

// 页面加载时检查
window.onload = () => {
    const savedTheme = localStorage.getItem('preferredTheme') || 'light';
    applyTheme(savedTheme);
};
</script>

<button onclick="saveTheme('light')">浅色主题</button>
<button onclick="saveTheme('dark')">深色主题</button>
</syntaxhighlight>

=== 表单数据自动保存 ===
定时保存表单内容防止意外丢失：

<syntaxhighlight lang="javascript">
const form = document.getElementById('myForm');

// 每5秒自动保存
setInterval(() => {
    const formData = {
        name: form.name.value,
        email: form.email.value
    };
    sessionStorage.setItem('draftForm', JSON.stringify(formData));
}, 5000);

// 页面加载时恢复
window.onload = () => {
    const savedData = sessionStorage.getItem('draftForm');
    if (savedData) {
        const data = JSON.parse(savedData);
        form.name.value = data.name || '';
        form.email.value = data.email || '';
    }
};
</syntaxhighlight>

== 注意事项 ==

* '''安全性'''：不要存储敏感信息（如密码、令牌）
* '''数据类型'''：只能存储字符串，复杂对象需序列化
* '''同步操作'''：可能阻塞主线程，大数据量操作需谨慎
* '''隐私合规'''：需在隐私政策中说明数据收集行为

== 数学表示 ==

存储空间使用量可表示为：

<math>
S = \sum_{i=1}^{n} (k_i + v_i) \times 2
</math>

其中：
* <math>S</math> 为总占用字节数
* <math>n</math> 为存储项数量
* <math>k_i</math> 为第i个键的字符长度
* <math>v_i</math> 为第i个值的字符长度

== 浏览器兼容性 ==

所有现代浏览器均支持Web Storage API，包括：
* Chrome 4+
* Firefox 3.5+
* Safari 4+
* IE 8+
* Edge 12+
* Opera 10.5+

对于需要更复杂存储需求的场景，可考虑IndexedDB或Web SQL（已废弃）。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML与JavaScript交互]]