html5 用什么数据库

HTML5 本身并不包含数据库、HTML5 通常与基于浏览器的存储解决方案一起使用、常用的客户端存储选项包括 Web Storage 和 IndexedDB。HTML5 并未自带任何数据库功能，但提供了多种用于客户端存储的技术。Web Storage 包括 localStorage 和 sessionStorage，它们允许在用户的浏览器中存储键值对数据，适合用于简单的数据存储和临时会话数据。IndexedDB 是一个更强大的客户端存储解决方案，支持更复杂的数据结构和查询操作，适合用于需要持久化存储和复杂查询的应用场景。

一、HTML5 客户端存储方案

HTML5 提供了几种主要的客户端存储解决方案，包括 Web Storage 和 IndexedDB。这些技术允许在用户的浏览器中存储数据，从而提高应用的性能和用户体验。

1、Web Storage

Web Storage 是 HTML5 提供的一种简单的客户端存储机制，分为 localStorage 和 sessionStorage。localStorage 用于存储持久化数据，即使浏览器关闭后数据也不会丢失；而 sessionStorage 仅在当前会话有效，关闭浏览器后数据会被清空。Web Storage 适用于存储较小、简单的键值对数据，例如用户偏好设置、表单数据等。

2、IndexedDB

IndexedDB 是 HTML5 提供的一个低级 API，用于在用户浏览器中存储大量结构化数据。IndexedDB 支持事务、键值对存储、多种数据类型和复杂查询操作，适合用于需要持久化存储和复杂查询的应用场景，例如离线 Web 应用和大型数据驱动的应用。

二、Web Storage 的使用

Web Storage 提供了一个简单的 API，用于存储和检索键值对数据。下面是一些常见的使用方法和示例。

1、localStorage

localStorage 是一种持久化存储机制，可以在多个会话中保存数据。使用 localStorage 可以非常方便地存储和检索数据。

// 存储数据
localStorage.setItem('username', 'JohnDoe');
// 检索数据
let username = localStorage.getItem('username');
console.log(username); // 输出: JohnDoe
// 删除数据
localStorage.removeItem('username');
// 清空所有数据
localStorage.clear();

2、sessionStorage

sessionStorage 与 localStorage 类似，但只在当前会话有效。关闭浏览器或标签页后，数据会被清空。

// 存储数据
sessionStorage.setItem('sessionID', '12345');
// 检索数据
let sessionID = sessionStorage.getItem('sessionID');
console.log(sessionID); // 输出: 12345
// 删除数据
sessionStorage.removeItem('sessionID');
// 清空所有数据
sessionStorage.clear();

三、IndexedDB 的使用

IndexedDB 是一种更复杂和强大的客户端存储解决方案，适用于需要持久化存储和复杂查询的应用场景。以下是一些基本操作和示例。

1、打开数据库

let request = indexedDB.open('myDatabase', 1);
request.onerror = function(event) {
    console.log('Database error: ' + event.target.errorCode);
};
request.onsuccess = function(event) {
    console.log('Database opened successfully');
    let db = event.target.result;
};

2、创建对象存储

在首次打开数据库时，可以创建对象存储（类似于表）。

request.onupgradeneeded = function(event) {
    let db = event.target.result;
    let objectStore = db.createObjectStore('customers', { keyPath: 'id' });
    objectStore.createIndex('name', 'name', { unique: false });
    objectStore.createIndex('email', 'email', { unique: true });
};

3、添加数据

request.onsuccess = function(event) {
    let db = event.target.result;
    let transaction = db.transaction(['customers'], 'readwrite');
    let objectStore = transaction.objectStore('customers');
    let request = objectStore.add({ id: 1, name: 'John Doe', email: 'john.doe@example.com' });
    request.onsuccess = function(event) {
        console.log('Customer added to the database');
    };
    request.onerror = function(event) {
        console.log('Error adding customer: ' + event.target.errorCode);
    };
};

4、读取数据

request.onsuccess = function(event) {
    let db = event.target.result;
    let transaction = db.transaction(['customers']);
    let objectStore = transaction.objectStore('customers');
    let request = objectStore.get(1);
    request.onsuccess = function(event) {
        console.log('Customer:', request.result);
    };
    request.onerror = function(event) {
        console.log('Error getting customer: ' + event.target.errorCode);
    };
};

5、更新数据

request.onsuccess = function(event) {
    let db = event.target.result;
    let transaction = db.transaction(['customers'], 'readwrite');
    let objectStore = transaction.objectStore('customers');
    let request = objectStore.get(1);
    request.onsuccess = function(event) {
        let customer = request.result;
        customer.name = 'Jane Doe';
        let updateRequest = objectStore.put(customer);
        updateRequest.onsuccess = function(event) {
            console.log('Customer updated');
        };
        updateRequest.onerror = function(event) {
            console.log('Error updating customer: ' + event.target.errorCode);
        };
    };
};

6、删除数据

request.onsuccess = function(event) {
    let db = event.target.result;
    let transaction = db.transaction(['customers'], 'readwrite');
    let objectStore = transaction.objectStore('customers');
    let request = objectStore.delete(1);
    request.onsuccess = function(event) {
        console.log('Customer deleted');
    };
    request.onerror = function(event) {
        console.log('Error deleting customer: ' + event.target.errorCode);
    };
};

四、IndexedDB 的高级操作

IndexedDB 支持更多高级功能，如游标、事务和索引。这些功能使得 IndexedDB 成为一个强大的客户端数据库解决方案。

1、使用游标遍历数据

游标允许你遍历对象存储中的所有记录。

request.onsuccess = function(event) {
    let db = event.target.result;
    let transaction = db.transaction(['customers']);
    let objectStore = transaction.objectStore('customers');
    let cursorRequest = objectStore.openCursor();
    cursorRequest.onsuccess = function(event) {
        let cursor = event.target.result;
        if (cursor) {
            console.log('Customer:', cursor.value);
            cursor.continue();
        }
    };
    cursorRequest.onerror = function(event) {
        console.log('Error opening cursor: ' + event.target.errorCode);
    };
};

2、使用事务

事务允许你对多个对象存储执行一系列操作，并确保这些操作要么全部成功，要么全部失败。

request.onsuccess = function(event) {
    let db = event.target.result;
    let transaction = db.transaction(['customers', 'orders'], 'readwrite');
    transaction.oncomplete = function(event) {
        console.log('Transaction completed');
    };
    transaction.onerror = function(event) {
        console.log('Transaction error: ' + event.target.errorCode);
    };
    let customerStore = transaction.objectStore('customers');
    let orderStore = transaction.objectStore('orders');
    customerStore.add({ id: 2, name: 'Alice', email: 'alice@example.com' });
    orderStore.add({ orderId: 1, customerId: 2, product: 'Laptop', quantity: 1 });
};

3、使用索引

索引允许你快速查找特定字段的记录。

request.onsuccess = function(event) {
    let db = event.target.result;
    let transaction = db.transaction(['customers']);
    let objectStore = transaction.objectStore('customers');
    let index = objectStore.index('email');
    let request = index.get('john.doe@example.com');
    request.onsuccess = function(event) {
        console.log('Customer:', request.result);
    };
    request.onerror = function(event) {
        console.log('Error getting customer by email: ' + event.target.errorCode);
    };
};

五、离线存储和同步

HTML5 提供的客户端存储技术可以用于构建离线 Web 应用，但需要处理数据的同步问题。

1、离线存储

通过使用 Web Storage 和 IndexedDB，可以在没有网络连接的情况下存储用户数据。这对于离线应用非常重要，例如离线笔记应用或任务管理应用。

2、数据同步

在用户重新连接到网络时，需要将本地存储的数据同步到服务器。这通常需要使用一些后台任务或服务工作者来处理数据同步。

function syncData() {
    let request = indexedDB.open('myDatabase', 1);
    request.onsuccess = function(event) {
        let db = event.target.result;
        let transaction = db.transaction(['customers'], 'readwrite');
        let objectStore = transaction.objectStore('customers');
        let cursorRequest = objectStore.openCursor();
        cursorRequest.onsuccess = function(event) {
            let cursor = event.target.result;
            if (cursor) {
                let customer = cursor.value;
                // 假设有一个 API 可以将数据同步到服务器
                fetch('https://api.example.com/sync', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(customer)
                }).then(response => {
                    if (response.ok) {
                        cursor.continue();
                    }
                });
            }
        };
    };
}

六、安全性和隐私

在使用 HTML5 客户端存储时，需特别注意数据的安全性和隐私问题。

1、数据加密

确保存储在客户端的数据是加密的，防止未经授权的访问。可以使用 Web 加密 API 对数据进行加密。

let data = 'Sensitive data';
let password = 'password';
crypto.subtle.importKey(
    'raw',
    new TextEncoder().encode(password),
    { name: 'PBKDF2' },
    false,
    ['deriveKey']
).then(baseKey => {
    return crypto.subtle.deriveKey(
        {
            name: 'PBKDF2',
            salt: new Uint8Array(16),
            iterations: 100000,
            hash: 'SHA-256'
        },
        baseKey,
        { name: 'AES-GCM', length: 256 },
        false,
        ['encrypt', 'decrypt']
    );
}).then(aesKey => {
    return crypto.subtle.encrypt(
        {
            name: 'AES-GCM',
            iv: new Uint8Array(12)
        },
        aesKey,
        new TextEncoder().encode(data)
    );
}).then(encryptedData => {
    console.log(new Uint8Array(encryptedData));
});

2、访问控制

确保只有经过授权的用户和应用才能访问存储的数据。可以使用 Token 或其他认证机制来限制对存储数据的访问。

3、敏感信息

避免在客户端存储敏感信息，如用户密码和个人身份信息。对于必须存储的数据，确保经过加密处理并定期清理不必要的数据。

七、性能优化

在使用 HTML5 客户端存储技术时，需注意性能优化，确保应用的快速响应和流畅体验。

1、数据压缩

在存储大数据量时，考虑使用数据压缩技术，以减少存储空间和传输时间。

2、批量操作

对于频繁的存储操作，考虑使用批量操作，以减少对存储的频繁访问，提高性能。

let bulkData = [
    { id: 3, name: 'Bob', email: 'bob@example.com' },
    { id: 4, name: 'Carol', email: 'carol@example.com' }
];
request.onsuccess = function(event) {
    let db = event.target.result;
    let transaction = db.transaction(['customers'], 'readwrite');
    let objectStore = transaction.objectStore('customers');
    bulkData.forEach(data => {
        objectStore.add(data);
    });
    transaction.oncomplete = function() {
        console.log('Bulk data added successfully');
    };
};

3、缓存机制

使用缓存机制减少对存储的频繁访问，尤其是在读取操作频繁的情况下。可以使用内存缓存来存储常用的数据。

let cache = {};
function getCachedData(key) {
    if (cache[key]) {
        return Promise.resolve(cache[key]);
    } else {
        return new Promise((resolve, reject) => {
            let request = indexedDB.open('myDatabase', 1);
            request.onsuccess = function(event) {
                let db = event.target.result;
                let transaction = db.transaction(['customers']);
                let objectStore = transaction.objectStore('customers');
                let getRequest = objectStore.get(key);
                getRequest.onsuccess = function(event) {
                    cache[key] = getRequest.result;
                    resolve(getRequest.result);
                };
                getRequest.onerror = function(event) {
                    reject('Error getting data: ' + event.target.errorCode);
                };
            };
        });
    }
}