在HTML存储数据的方法

最新推荐文章于 2024-09-09 13:10:14 发布

原创最新推荐文章于 2024-09-09 13:10:14 发布 · 324 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #ViewUI

本文介绍了HTML5提供的localStorage和sessionStorage两种客户端存储方法。详细解释了localStorage的特点、使用方法及如何通过setItem()、getItem()和removeItem()方法来操作数据。

HTML5提供了两种在客户端存储数据的新方法：

1》localStorage：没有时间限制的数据存储

2》sessionStorage：针对一个session的数据存储

localStorage属性允许你访问一个Storage对象。localStorage与sessionStorage相似，不同之处在于，存储在localStorage里面的数据没有过期时间，而存储在sessionStorage里面的数据会在浏览器会话结束时被清除，即浏览器关闭时。

localStorage.setItem()作为Storage接口的方法，接受一个键名和值作为参数，将会把键名添加到存储中，如果键名已存在，则更新其对应的值。

function Storage() {
  localStorage.setItem('bgcolor', 'red');
  localStorage.setItem('font', 'Helvetica');
  localStorage.setItem('image', 'myCat.png');
}

localStorage.getItem()作为Storage接口的方法，接受一个键名作为参数，并返回对应键名的值。

getElementById()方法可返回对拥有指定ID的第一个对象的引用。

function setStyles() {
  var currentColor = localStorage.getItem('bgcolor');
  var currentFont = localStorage.getItem('font');
  var currentImage = localStorage.getItem('image');
  document.getElementById('bgcolor').value = currentColor;
  document.getElementById('font').value = currentFont;
  document.getElementById('image').value = currentImage;
}

localStorage接口的removeItem()方法，接受一个键名作为参数，会把该键名从存储中移除。

function populateStorage() {
  localStorage.setItem('bgcolor', 'red');
  localStorage.setItem('font', 'Helvetica');
  localStorage.setItem('image', 'myCat.png');
  localStorage.removeItem('image');
}