编辑“︁HTML本地存储”︁

= HTML本地存储 =

'''HTML本地存储'''（也称为Web存储）是HTML5引入的一组API，允许网页在用户的浏览器中存储数据。与传统的Cookie相比，本地存储提供了更大的存储空间（通常为5MB至10MB）和更简单的编程接口，同时不会随每个HTTP请求发送到服务器。本地存储分为两种类型：<code>localStorage</code>（持久存储）和<code>sessionStorage</code>（会话存储）。

== 介绍 ==
HTML本地存储提供了一种在客户端存储键值对数据的机制，适用于需要保存用户偏好、缓存数据或离线应用的场景。它的主要特点包括：
* '''持久性'''：<code>localStorage</code>的数据在浏览器关闭后仍然保留，而<code>sessionStorage</code>的数据仅在当前会话（标签页）有效。
* '''存储限制'''：通常为5MB（不同浏览器可能略有差异）。
* '''同源策略'''：数据仅对同一域名下的页面可访问。

== 基本用法 ==
=== localStorage ===
<code>localStorage</code>用于长期存储数据，直到用户手动清除或通过JavaScript删除。

<syntaxhighlight lang="javascript">
// 存储数据
localStorage.setItem('username', 'Alice');

// 读取数据
const username = localStorage.getItem('username');
console.log(username); // 输出: "Alice"

// 删除数据
localStorage.removeItem('username');

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

=== sessionStorage ===
<code>sessionStorage</code>的用法与<code>localStorage</code>类似，但数据仅在当前会话中有效。

<syntaxhighlight lang="javascript">
// 存储数据
sessionStorage.setItem('theme', 'dark');

// 读取数据
const theme = sessionStorage.getItem('theme');
console.log(theme); // 输出: "dark"
</syntaxhighlight>

== 数据类型与限制 ==
本地存储仅支持字符串类型的数据。若要存储对象或数组，需使用<code>JSON.stringify()</code>和<code>JSON.parse()</code>进行转换。

<syntaxhighlight lang="javascript">
// 存储对象
const user = { name: 'Bob', age: 25 };
localStorage.setItem('user', JSON.stringify(user));

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

== 实际应用案例 ==
=== 用户偏好保存 ===
网站可以保存用户的主题偏好、语言设置等，提升用户体验。

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

// 加载时应用主题
window.addEventListener('load', () => {
    const theme = localStorage.getItem('preferredTheme') || 'light';
    document.body.className = theme;
});
</syntaxhighlight>

=== 离线表单数据 ===
在表单填写过程中，若用户意外关闭页面，可通过本地存储恢复数据。

<syntaxhighlight lang="javascript">
// 监听表单输入变化
document.getElementById('form').addEventListener('input', (e) => {
    const formData = {
        name: document.getElementById('name').value,
        email: document.getElementById('email').value
    };
    localStorage.setItem('draftForm', JSON.stringify(formData));
});

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

== 安全性注意事项 ==
* 本地存储的数据'''不安全'''，不应存储敏感信息（如密码、令牌）。
* 遵循同源策略，但需防范XSS攻击（恶意脚本可能读取/修改数据）。
* 存储大量数据可能影响性能。

== 浏览器兼容性 ==
HTML本地存储被所有现代浏览器支持，包括：
* Chrome 4+
* Firefox 3.5+
* Safari 4+
* Edge 12+
* Opera 10.5+

== 总结 ==
HTML本地存储是构建现代Web应用的重要工具，适用于：
* 保存用户设置
* 缓存数据以减少服务器请求
* 实现离线功能
* 临时存储表单数据

通过合理使用<code>localStorage</code>和<code>sessionStorage</code>，开发者可以显著提升用户体验和应用性能。

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