HTML5 Web 存储

这篇文章距离上次修改已过184天，其中的内容可能已经有所变动。

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'，你可以根据需要进行修改。检索操作会在页面上显示相应的值。

评论已关闭

推荐阅读