HTML5 本地存储（LocalStorage）技术教程
引言
在HTML5中，引入了两种新的客户端存储机制，它们是：
- LocalStorage
- SessionStorage
本文将重点介绍LocalStorage，它允许我们在用户的浏览器中存储数据，数据在浏览器关闭后依然存在。
优势
- 数据存储在浏览器中，无需服务器。
- 数据持久化，即使页面重新加载或浏览器重启。
- 容量大，通常为5MB左右（不同浏览器可能有所不同）。
- 操作简单，支持字符串类型数据。
基本用法
LocalStorage提供了一组简单的API，用于存储和获取数据：
localStorage.setItem(key, value)：存储数据。localStorage.getItem(key)：获取数据。localStorage.removeItem(key)：删除数据。localStorage.clear()：清除所有数据。
注意：的值需要是字符串，如需存储对象等非字符串类型数据，需要进行JSON序列化。
案例讲解
以下是一个简单的示例，用于存储用户的姓名和年龄，并在页面刷新后重新加载这些数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LocalStorage 示例</title>
</head>
<body>
<h2>LocalStorage 示例</h2>
<form id="userForm">
姓名: <input type="text" id="userName" placeholder="输入姓名"><br>
年龄: <input type="number" id="userAge" placeholder="输入年龄"><br>
<button type="button" onclick="saveUserData()">保存数据</button>
<button type="button" onclick="loadUserData()">加载数据</button>
</form>
<p id="dataDisplay"></p>
<script>
function saveUserData() {
var userName = document.getElementById("userName").value;
var userAge = document.getElementById("userAge").value;
var userData = { name: userName, age: userAge };
localStorage.setItem("userData", JSON.stringify(userData));
alert("数据已保存！");
}
function loadUserData() {
var userData = JSON.parse(localStorage.getItem("userData"));
if (userData) {
document.getElementById("userName").value = userData.name;
document.getElementById("userAge").value = userData.age;
document.getElementById("dataDisplay").innerText = "加载的数据: " + JSON.stringify(userData, null, 2);
} else {
alert("无数据可加载！");
}
}
window.onload = function() {
loadUserData();
};
</script>
</body>
</html>
结论
LocalStorage是一种强大的客户端存储机制，适用于在浏览器中存储持久化数据。它可以提高应用的性能和用户体验，特别是在需要频繁读取数据的情况下。
