html5如何显示本地数据

HTML5作为一种前端技术，其在显示本地数据方面的功能备受开发者青睐，如何使用HTML5来显示本地数据呢？我将详细介绍几种方法,帮助大家轻松实现这一功能。

我们可以使用HTML5的本地存储功能，主要包括LocalStorage和SessionStorage，这两种存储方式可以让我们在客户端存储数据,从而实现数据的本地读取和显示。

使用LocalStorage存储和显示数据

LocalStorage是HTML5提供的一种本地存储方式，可以永久存储数据，除非用户手动清除,以下是一个简单的示例：

在HTML文件中创建一个文本输入框和一个按钮,用于输入数据并保存到LocalStorage。

Markup

<input type="text" id="dataInput" placeholder="请输入数据">
<button onclick="saveData()">保存数据</button>

创建JavaScript函数saveData(),用于将输入框中的数据保存到LocalStorage。

Markup

<script>
  function saveData() {
    var data = document.getElementById('dataInput').value;
    localStorage.setItem('myData', data);
  }
</script>

创建一个按钮用于读取LocalStorage中的数据并显示。

Markup

<button onclick="showData()">显示数据</button>

创建JavaScript函数showData(),用于读取LocalStorage中的数据并显示。

Markup

<script>
  function showData() {
    var data = localStorage.getItem('myData');
    alert(data);
  }
</script>

使用Web SQL数据库

HTML5还支持Web SQL数据库，这是一种轻量级的数据库，可以用来存储和检索大量数据,以下是一个简单的示例：

创建一个数据库。

Markup

<script>
  var db = openDatabase('myDB', '1.0', 'My Database', 2 * 1024 * 1024);
</script>

html5如何显示本地数据

创建一个表并插入数据。

Markup

<script>
  db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS data (id unique, data)');
    tx.executeSql('INSERT INTO data (id, data) VALUES (1, "示例数据")');
  });
</script>

读取数据并显示。

Markup

<script>
  db.transaction(function (tx) {
    tx.executeSql('SELECT * FROM data', [], function (tx, results) {
      var len = results.rows.length;
      for (var i = 0; i < len; i++) {
        alert(results.rows.item(i).data);
      }
    });
  });
</script>

使用IndexedDB

IndexedDB是一种低级API，用于客户端存储大量结构化数据,以下是使用IndexedDB的示例：

打开数据库。

Markup

<script>
  var openRequest = indexedDB.open('myDB', 1);
</script>

创建对象存储空间。

Markup

<script>
  openRequest.onupgradeneeded = function(e) {
    var db = e.target.result;
    if (!db.objectStoreNames.contains('data')) {
      db.createObjectStore('data');
    }
  };
</script>

插入数据。

Markup

<script>
  openRequest.onsuccess = function(e) {
    var db = e.target.result;
    var transaction = db.transaction(['data'], 'readwrite');
    var store = transaction.objectStore('data');
    var data = { id: 1, value: "示例数据" };
    var putRequest = store.put(data);
    putRequest.onsuccess = function(e) {
      alert('数据已保存');
    };
  };
</script>

读取数据并显示。

Markup

<script>
  openRequest.onsuccess = function(e) {
    var db = e.target.result;
    var transaction = db.transaction(['data'], 'readonly');
    var store = transaction.objectStore('data');
    var getRequest = store.get(1);
    getRequest.onsuccess = function(e) {
      alert('数据：' + getRequest.result.value);
    };
  };
</script>