HTML5本地存储使用详解

HTML5提供了一个本地存储的解决方案，可以在客户端本地存储数据。这些数据不会随着HTTP请求发送到服务器，而是仅仅保存在客户端。

HTML5本地存储的两种方式：

localStorage：用于长久保存整个网站的数据，保存的数据没有时间限制。
sessionStorage：用于临时保存某个会话的数据，关闭页面或浏览器时数据会被清除。

以下是使用localStorage的一个例子：




<!DOCTYPE html>
<html>
<body>
 
<h2>LocalStorage Test</h2>
 
<div id="data">
  <p>Name: <input type="text" id="name" size="20"></p>
  <p>Age: <input type="text" id="age" size="20"></p>
  <input type="button" onclick="saveStorage()" value="Save">
</div>
 
<script>
function saveStorage() {
  var name = document.getElementById('name').value;
  var age = document.getElementById('age').value;
  
  localStorage.setItem('name', name);
  localStorage.setItem('age', age);
  
  var data = "<p>Name: " + localStorage.getItem('name') + 
             "<p>Age: " + localStorage.getItem('age');
  
  document.getElementById('data').innerHTML = data;
}
 
window.onload = function() {
  if (localStorage.getItem('name')) {
    document.getElementById('name').value = localStorage.getItem('name');
    document.getElementById('age').value = localStorage.getItem('age');
  }
};
</script>
 
</body>
</html>

在这个例子中，我们创建了一个简单的表单，用户可以在输入框中输入姓名和年龄。当用户点击"Save"按钮时，这些数据会被保存到localStorage中。当页面加载时，如果localStorage中存有数据，则会把数据填充到表单中。

注意：localStorage中只能存储字符串。如果要存储对象，需要使用JSON.stringify()将对象转换为字符串，读取时使用JSON.parse()将字符串转换回对象。

HTML5本地存储使用详解

评论已关闭

推荐阅读