HTML5本地存储：从入门到精通
HTML5引入了一个本地存储API，允许网站在用户浏览器中本地保存数据。这个API可以保存键值对数据，并提供了一些方法来读取和删除这些数据。
以下是使用本地存储API的基本示例：
<!DOCTYPE html>
<html>
<body>
<h2>本地存储示例</h2>
<p>键入一些文本，然后点击保存数据按钮。</p>
<input id="myText" type="text">
<button onclick="saveData()">保存数据</button>
<button onclick="loadData()">加载数据</button>
<button onclick="deleteData()">删除数据</button>
<p id="output"></p>
<script>
function saveData() {
// 获取输入框的值
const text = document.getElementById("myText").value;
// 将数据保存到本地存储中
localStorage.setItem("myKey", text);
}
function loadData() {
// 从本地存储中读取数据
const data = localStorage.getItem("myKey");
// 显示读取的数据
document.getElementById("output").innerText = data;
}
function deleteData() {
// 删除保存的数据
localStorage.removeItem("myKey");
}
</script>
</body>
</html>这个示例包括了基本的本地存储操作：保存数据、加载数据和删除数据。用户在输入框中输入的文本会被保存到localStorage中，键名为myKey。加载数据时，会从localStorage中读取这个键对应的值并显示出来。删除数据按钮会移除保存的键值对。
评论已关闭