HTML5的离线存储

这篇文章距离上次修改已过451天，其中的内容可能已经有所变动。

HTML5引入了两种机制来实现离线存储：应用程序缓存和IndexedDB。

应用程序缓存（已废弃）

应用程序缓存是一种老旧的技术，它允许你指定浏览器缓存哪些文件，以便在用户离线时使用。但是，由于其限制性，已经不再推荐使用，并可能在未来的浏览器版本中被移除。

使用方法：

在HTML文档的头部添加一个manifest属性指向一个.appcache文件：




<!DOCTYPE HTML>
<html manifest="cache.manifest">
...
</html>

cache.manifest文件的内容可能如下：




CACHE MANIFEST
# 2019-04-10 v1.0.0
 
CACHE:
- index.html
- script.js
- style.css
- img/logo.png
 
NETWORK:
*

IndexedDB（推荐）

IndexedDB是一个非关系型数据库，用于存储大量数据，提供了键值对存储和高级查询功能。

使用方法：




// 打开或创建数据库
var request = window.indexedDB.open("MyDatabase", 1);
 
// 数据库升级时触发
request.onupgradeneeded = function(event) {
    var db = event.target.result;
    // 如果没有object store，则创建
    if (!db.objectStoreNames.contains('MyStore')) {
        var objectStore = db.createObjectStore('MyStore', { keyPath: 'id' });
    }
};
 
// 数据库打开成功时触发
request.onsuccess = function(event) {
    var db = event.target.result;
    // 使用数据库...
};
 
// 错误处理
request.onerror = function(event) {
    // 处理错误...
};
 
// 使用IndexedDB存储数据
var db;
request.onsuccess = function(event) {
    db = event.target.result;
    var transaction = db.transaction(['MyStore'], 'readwrite');
    var objectStore = transaction.objectStore('MyStore');
    var value = { id: 1, name: 'John Doe' };
    objectStore.add(value); // 添加记录
    objectStore.put(value); // 更新记录
    objectStore.delete(1); // 删除记录
    objectStore.get(1); // 获取记录
    objectStore.openCursor().onsuccess = function(event) {
        var cursor = event.target.result;
        if (cursor) {
            // 使用cursor.value...
            cursor.continue();
        }
    };
};

以上代码展示了如何使用IndexedDB进行基本的存储操作。注意，IndexedDB的操作是异步的，并且需要错误处理。

HTML5的离线存储

评论已关闭

推荐阅读