indexedDB使用

2017-01-20

需求说明

最近学习关于前端缓存的问题。下来来介绍一下关于indexedDB的一个简单Demo。需要注意的是indexedDB目前只支持新版浏览器。具体可以参考官方文档。
再来说说这次Demo需要解决的主要问题，在我的用户场景中，大多数用户是移动网络，加载速度超慢且不稳定，鉴于不会经过更新静态资源文件。因此打算使用本地存储来实现资源缓存（不要问我为什么不使用CDN）。

分析实现方案

用户端网络不稳定。

解决方案：尽量较少用户请求，特别是针对于非必要的数据，例如：js 脚本。
使用何种缓存手段。

解决方案：这个问题也就简化到了使用何种方案来实现前端本地存储。常见的有（localStorage, indexedDB, websql），我们这里采用 indexedDB。
如何解决更新问题。

解决方案：每次使用缓存时，更新一下使用时间。设置脚本的名称为索引字段。也可以根据使用时间，废弃掉已不用的缓存内容，节约空间。

代码实现

第一阶段，初始化 indexDB

var DB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB,
    supportDB = !!DB,
    db = null;
    if (supportDB) {
        var tableName = 'js-cache',
            openRequest = DB.open(tableName, 1);
        openRequest.onupgradeneeded = function(e) {
            var thisDB = e.target.result,
                store = null;
            // 解决多版本之后，objectStore 已存在问题
            if (!thisDB.objectStoreNames.contains(tableName)) {
                store = thisDB.createObjectStore(
                    tableName, {autoIncrement: true}
                );
            } else {
                store = e.currentTarget.transaction.objectStore(tableName);
            }
            // 解决多版本之后，索引存在问题
            if (store.indexNames.contains('name')) {
                store.deleteIndex('name');
            }
            store.createIndex('name', 'name', { unique: true });
        }
        openRequest.onsuccess = function(e) {
            db = e.target.result;
        }
    }

初始化一个 indexedDB 数据库，创建一个 `index` 索引，根据存储的数据 `name` 字段.

第二阶段，实现缓存和读取缓存

...
// 获取本地缓存
function getCache(name, callback) {
    if (!supportDB) return callback(false);
    var transaction = db.transaction([tableName], 'readonly'),
        store = transaction.objectStore(tableName),
        request = store.index('name').get(name);
    request.onsuccess = function(e) {
        var result = e.target.result;
        if(!!result) {
            callback(true, result);
        } else {
            callback(false);
        }
    }
    request.onerror = function(e) {
        callback(false);
    }
}
// 记录到本地缓存
function setCache(name, data) {
    if (!supportDB) return;
    var transaction = db.transaction([tableName], 'readwrite'),
        store = transaction.objectStore(tableName),
        cache = {
            name: name,
            content: data,
            created: new Date()
        },
        request = store.add(cache);
    request.onerror = function(e) {
        console.log('Error', e.target.error.name);
    }
    request.onsuccess = function(e) {}
}

setCahce 函数，是将下载好的 js 内容存储到 indexedDB 中， getCache 函数通过 `name` 索引获取对应的 js 缓存内容。

第三阶段，实现业务逻辑

...
// 用来记录已经被使用的缓存列表
var cacheLists = [];
// 获取本地缓存
function getCache (name) {
    ...
    // 在这里添加到 cacheLists 列表中
    if(!!result) {
        cacheLists.push(name);
        callback(true, result);
    }
    ...
}
...
// 下载某个 js 脚本
function downloadScript(name) {
    // 查找本地是否有缓存
    getCache(name, function(success, result) {
        if (success) {
            insertScriptToHead(data);
        } else {
            fetch(name).then(
                data => {return data.text();}
            ).then(
                data => {
                    setCache(name, data);
                    insertScriptToHead(data);
                }
            ).catch(err => {
                console.log(err);
            });
        }
    });
}
// 清除和更新缓存
function removeCache() {
    if (!supportDB) return;
    var transaction = db.transaction([tableName], 'readwrite'),
        store = transaction.objectStore(tableName),
        twoWeek = 1209600000;
    store.openCursor().onsuccess = function(event) {
        var cursor = event.target.result;
        if (cursor) {
            if (cacheLists.indexOf(cursor.value.name) !== -1) {
                cursor.value.created = new Date();
                cursor.update(cursor.value);
            } else {
                var now = new Date(),
                    last = cursor.value.created;
                if (now - last > twoWeek) {
                    cursor.delete();
                }
            }
            cursor.continue();
        }
    }
}
var head = document.head;
function insertScriptToHead(scriptContent) {
    var script = document.createElement('script');
    script.innerHTML = scriptContent;
    script.type = 'text/javascript';
    head.appendChild(script);
}

增加 cacheLists 来记录，已经正在被使用的缓存。
removeCache 函数，是用来更新和删除已过期的缓存。
downloadScript 函数，是用来存储缓存和动态将 script 插入到网页中。
在这里移除缓存的时候，我在这里定义的是未使用缓存超过14天，就删除缓存。

最后，给自己的函数，添加上闭包，阻止 xss 攻击。

// 为了防止其他人直接调用 donwload 函数，我们给这段函数加上闭包.
(function () {
    // 检测 indexedDB 兼容性，因为只有新版本浏览器支持
    var DB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB;
    var supportDB = !!DB,
        db = null;
    if (supportDB) {
        var tableName = 'js-cache',
            openRequest = DB.open(tableName, 1);
        openRequest.onupgradeneeded = function(e) {
            console.log('Upgrading');
            var thisDB = e.target.result,
                store = null;
            // 解决多版本之后，objectStore 已存在问题
            if (!thisDB.objectStoreNames.contains(tableName)) {
                store = thisDB.createObjectStore(
                    tableName, {autoIncrement: true}
                );
            } else {
                store = e.currentTarget.transaction.objectStore(tableName);
            }
            // 解决多版本之后，索引存在问题
            if (store.indexNames.contains('name')) {
                store.deleteIndex('name');
            }
            store.createIndex('name', 'name', { unique: true });
        }
        openRequest.onsuccess = function(e) {
            db = e.target.result;
            downloads();
            removeCache();
        }
    } else {
        downloads();
    }
    // 这里写上 fake uri
    function downloads() {
        downloadScript('http://www.aliyun.com/aliyun-oss-sdk-4.3.0.min.js');
        downloadScript('http://cdn.google.com/RecordRTC.js');
        downloadScript('http://cdn.google.com/gumadapter.js');
        downloadScript('http://cdn.google.com/ping.js');
    }
    // 用来记录已经被使用的缓存列表
    var cacheLists = [];
    // 获取本地缓存
    function getCache(name, callback) {
        if (!supportDB) return callback(false);
        var transaction = db.transaction([tableName], 'readonly'),
            store = transaction.objectStore(tableName),
            request = store.index('name').get(name);
        request.onsuccess = function(e) {
            var result = e.target.result;
            if(!!result) {
                cacheLists.push(name);
                callback(true, result);
            } else {
                callback(false);
            }
        }
        request.onerror = function(e) {
            callback(false);
        }
    }
    // 记录到本地缓存
    function setCache(name, data) {
        if (!supportDB) return;
        var transaction = db.transaction([tableName], 'readwrite'),
            store = transaction.objectStore(tableName),
            cache = {
                name: name,
                content: data,
                created: new Date()
            },
            request = store.add(cache);
        request.onerror = function(e) {
            console.log('Error', e.target.error.name);
        }
        request.onsuccess = function(e) {}
    }
    // 下载某个 js 脚本
    function downloadScript(name) {
        // 查找本地是否有缓存
        getCache(name, function(success, result) {
            if (success) {
                insertScriptToHead(data);
            } else {
                fetch(name).then(
                    data => {return data.text();}
                ).then(
                    data => {
                        setCache(name, data);
                        insertScriptToHead(data);
                    }
                ).catch(err => {
                    console.log(err);
                });
            }
        });
    }
    // 清除和更新缓存
    function removeCache() {
        if (!supportDB) return;
        var transaction = db.transaction([tableName], 'readwrite'),
            store = transaction.objectStore(tableName),
            twoWeek = 1209600000;
        store.openCursor().onsuccess = function(event) {
            var cursor = event.target.result;
            if (cursor) {
                if (cacheLists.indexOf(cursor.value.name) !== -1) {
                    cursor.value.created = new Date();
                    cursor.update(cursor.value);
                } else {
                    var now = new Date(),
                        last = cursor.value.created;
                    if (now - last > twoWeek) {
                        cursor.delete();
                    }
                }
                cursor.continue();
            }
        }
    }
    var head = document.head;
    function insertScriptToHead(scriptContent) {
        var script = document.createElement('script');
        script.innerHTML = scriptContent;
        script.type = 'text/javascript';
        head.appendChild(script);
    }
})();

总结

在这里我们使用的是 indexedDB 来缓存本地文件，是因为这个的存储空间是无限的。而 localstorage 默认情况下只有 5M, 而 web sql 已经被弃用。
在缓存文件很多的时候或者因为读取indexedDB遇到性能问题时，我们可以使用 web worker service 来操作 indexedDB 然后同步到我们的 ui 线程。