html5怎么看到本地数据库

HTML5访问本地数据库的方法

HTML5本身是前端技术,无法直接操作传统意义上的本地数据库（如MySQL、SQLite），但可以通过浏览器提供的客户端存储机制实现类似“本地数据库”的功能，主要包括：

LocalStorage

• 特点：键值对存储，持久化（关闭浏览器后数据不丢失），容量约5MB。

• 使用方法：

  // 存储数据
  localStorage.setItem('key', 'value');
  // 读取数据
  const value = localStorage.getItem('key');
  // 删除数据
  localStorage.removeItem('key');
  // 清空所有数据
  localStorage.clear();

SessionStorage

• 特点：键值对存储，临时性（关闭页面或标签页后数据丢失），容量约5MB。
• 使用方法：与localStorage类似，替换为sessionStorage。

IndexedDB

• 特点：结构化数据存储，支持事务、索引，容量较大（通常几百MB到数GB）。

• 适用场景：复杂数据结构（如对象、数组）、离线应用。

• 基本操作：

  // 打开数据库
  const request = indexedDB.open('myDatabase', 1);
  request.onupgradeneeded = (event) => {
    const db = event.target.result;
    // 创建对象存储（类似表）
    db.createObjectStore('users', { keyPath: 'id' });
  };
  request.onsuccess = (event) => {
    const db = event.target.result;
    // 读取数据
    const transaction = db.transaction(['users'], 'readonly');
    const store = transaction.objectStore('users');
    const req = store.get(1); // 查询id=1的数据
    req.onsuccess = (e) => console.log(e.target.result);
  };
  request.onerror = (event) => console.error('Error:', event.target.error);

在页面中展示本地数据库数据

以IndexedDB为例，将数据渲染为HTML表格：

<table id="data-table">
  <thead>
    <tr><th>ID</th><th>Name</th></tr>
  </thead>
  <tbody></tbody>
</table>
<script>
  const dbRequest = indexedDB.open('myDatabase', 1);
  dbRequest.onsuccess = (event) => {
    const db = event.target.result;
    const transaction = db.transaction(['users'], 'readonly');
    const store = transaction.objectStore('users');
    const req = store.getAll(); // 获取所有数据
    req.onsuccess = (e) => {
      const rows = e.target.result;
      const tbody = document.querySelector('#data-table tbody');
      rows.forEach(row => {
        const tr = document.createElement('tr');
        tr.innerHTML = `<td>${row.id}</td><td>${row.name}</td>`;
        tbody.appendChild(tr);
      });
    };
  };
</script>

常见问题与解答

问题1：如何删除IndexedDB中的所有数据？

解答：通过删除对象存储或清空数据：

const request = indexedDB.open('myDatabase', 1);
request.onsuccess = (event) => {
  const db = event.target.result;
  db.deleteObjectStore('users'); // 删除整个对象存储
  // 或遍历数据并逐条删除
};

问题2：LocalStorage和SessionStorage的区别是什么？

解答：
| 特性 | LocalStorage | SessionStorage |
|————————-|———————————|———————————-|
| 生命周期 | 持久化（浏览器关闭后仍存在） | 会话级（页面/标签页关闭后消失） |
| 用途 | 长期存储配置、用户偏好等 | 短期存储临时数据 |
| API方法 | localStorage | sessionStorage