html5数据库展示模板

HTML5 数据库展示模板

基础概念

HTML5 引入了 Web Storage API，其中包括 localStorage 和 sessionStorage，用于在浏览器中存储数据。此外，HTML5 还引入了一个新的客户端数据库——IndexedDB，它是一个事务型数据库系统，相比于 localStorage，IndexedDB 提供了更大的存储空间和更复杂的查询功能。

类型

localStorage：用于存储简单的键值对数据，适合存储少量的数据。
sessionStorage：与 localStorage 类似，但数据仅在当前会话中有效，关闭浏览器后数据会被清除。
IndexedDB：用于存储大量结构化数据，支持复杂的查询和事务处理。

应用场景

离线应用：IndexedDB 可以用于存储应用的数据，使得应用在离线状态下也能正常运行。
缓存数据：可以使用 localStorage 或 sessionStorage 缓存一些常用的数据，减少网络请求。
复杂数据管理：IndexedDB 适用于需要存储和管理大量结构化数据的场景，如购物车、笔记应用等。

示例代码

以下是一个使用 IndexedDB 的简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IndexedDB Example</title>
</head>
<body>
    <h1>IndexedDB Example</h1>
    <button onclick="openDB()">Open Database</button>
    <button onclick="addData()">Add Data</button>
    <button onclick="getData()">Get Data</button>

    <script>
        let db;

        function openDB() {
            const request = indexedDB.open('myDatabase', 1);

            request.onupgradeneeded = function(event) {
                db = event.target.result;
                db.createObjectStore('users', { keyPath: 'id' });
            };

            request.onsuccess = function(event) {
                db = event.target.result;
                console.log('Database opened successfully');
            };

            request.onerror = function(event) {
                console.error('Database error: ' + event.target.errorCode);
            };
        }

        function addData() {
            const transaction = db.transaction(['users'], 'readwrite');
            const store = transaction.objectStore('users');

            const user = { id: 1, name: 'John Doe', email: 'john@example.com' };
            const request = store.add(user);

            request.onsuccess = function(event) {
                console.log('Data added successfully');
            };

            request.onerror = function(event) {
                console.error('Error adding data: ' + event.target.errorCode);
            };
        }

        function getData() {
            const transaction = db.transaction(['users'], 'readonly');
            const store = transaction.objectStore('users');

            const request = store.get(1);

            request.onsuccess = function(event) {
                const user = event.target.result;
                console.log('User:', user);
            };

            request.onerror = function(event) {
                console.error('Error getting data: ' + event.target.errorCode);
            };
        }
    </script>
</body>
</html>