BAT大佬推荐使用的HTML5的十个功能,实战解析
warning:
这篇文章距离上次修改已过186天,其中的内容可能已经有所变动。
以下是实现HTML5本地存储的代码示例:
<!DOCTYPE html>
<html>
<body>
<h2>本地存储 - 设置和获取值</h2>
<p>在本地存储中设置和获取值:</p>
<input id="llocalStorage" type="text" value="">
<button onclick="setLocalStorage()">设置本地存储</button>
<button onclick="getLocalStorage()">获取本地存储</button>
<button onclick="clearLocalStorage()">清除本地存储</button>
<p id="result"></p>
<script>
function setLocalStorage() {
var key = "user";
var value = document.getElementById("llocalStorage").value;
localStorage.setItem(key, value);
showResult("值已设置。");
}
function getLocalStorage() {
var key = "user";
var value = localStorage.getItem(key);
showResult("获取到的值:" + value);
}
function clearLocalStorage() {
localStorage.clear();
showResult("本地存储已清除。");
}
function showResult(msg) {
document.getElementById("result").innerText = msg;
}
</script>
</body>
</html>
这段代码展示了如何使用HTML5的本地存储功能来存储、检索和清除数据。用户可以在输入框中输入文本,然后通过点击相应的按钮来设置、获取或清除本地存储的值。操作结果会显示在页面底部的<p id="result"></p>
元素中。
评论已关闭