HTML5 Web 存储 API 允许网站在用户的浏览器中本地保存数据。有两种类型的存储：
localStorage- 没有时间限制的数据存储。数据只有在被清除才会消失。sessionStorage- 针对一个 session 的数据存储。数据在浏览器关闭后消失。
以下是使用 localStorage 和 sessionStorage 的示例代码：
<!DOCTYPE html>
<html>
<body>
<h2>LocalStorage 示例</h2>
<p>点击下面的按钮来存储或检索数据。</p>
<button onclick="storeLocal()">存储数据到 localStorage</button>
<button onclick="retrieveLocal()">从 localStorage 获取数据</button>
<button onclick="clearLocal()">清除 localStorage 数据</button>
<p id="localResult"></p>
<h2>SessionStorage 示例</h2>
<p>点击下面的按钮来存储或检索数据。</p>
<button onclick="storeSession()">存储数据到 sessionStorage</button>
<button onclick="retrieveSession()">从 sessionStorage 获取数据</button>
<button onclick="clearSession()">清除 sessionStorage 数据</button>
<p id="sessionResult"></p>
<script>
function storeLocal() {
localStorage.setItem('key', 'value');
}
function retrieveLocal() {
var value = localStorage.getItem('key');
document.getElementById("localResult").innerHTML = value;
}
function clearLocal() {
localStorage.clear();
}
function storeSession() {
sessionStorage.setItem('key', 'value');
}
function retrieveSession() {
var value = sessionStorage.getItem('key');
document.getElementById("sessionResult").innerHTML = value;
}
function clearSession() {
sessionStorage.clear();
}
</script>
</body>
</html>在这个例子中，我们有两组按钮来存储、检索和清除数据。存储的键和值都是示例中的 'key' 和 'value'，你可以根据需要进行修改。检索操作会在页面上显示相应的值。