基于IndexedDB實作簡單檔案系統

現在的indexedDB已經有幾個成熟的庫了，比如西面這幾個，任何一個都是非常出色的。 用别人的東西好處是上手快，看文檔就好，要是文檔不太好，那就有點尴尬了。 dexie.js  :A Minimalistic Wrapper for IndexedDB zangodb :MongoDB-like interface for HTML5 IndexedDB localForage :Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful AP idb.filesystem.js

: HTML5 Filesystem API polyfill using IndexedDB

File System

filer

:A wrapper library for the HTML5 Filesystem API what reuses UNIX commands (cp, mv, ls) for its API.

本文的主題是基于indexedDB開發簡單的檔案系統，當然是簡單的，可以有一個思路，覺得原來如此簡單。

我也不多說了，源碼在 

IDBProvider.js

，核心的代碼反而是  _toPromise,

因為indexed的操作，基本是先建立事務，獲得objectStore，再進行增删改查。

說道這裡是簡單版本，對目錄的控制，對檔案資訊的控制，删除都沒有具體實作，為什麼呢，等你來啊。

_toPromise(method, ...args) {
        try {
            return new Promise((resolve, reject) => {
                // 獲得事務
                let trans = this.transaction
                // 獲得請求
                let req = trans.objectStore(this._storeName)[method](...args)
                // 請求成功
                req.onsuccess = event => resolve(event.target.result)
                // 請求失敗
                req.onerror = event => reject(req.error)
                // 事務失敗
                trans.onerror = event => reject(trans.error)
            })
        } catch (err) {
            Promise.reject(err)
        }
    }      

let _w_ = window
_indexedDB_ = _w_.indexedDB || _w_.mozIndexedDB || _w_.webkitIndexedDB || _w_.msIndexedDB
_w_.IDBTransaction = _w_.IDBTransaction || _w_.webkitIDBTransaction || _w_.msIDBTransaction
_w_.IDBKeyRange = _w_.IDBKeyRange || _w_.webkitIDBKeyRange || _w_.msIDBKeyRange

class IDBProvider {

    constructor() {
        // DB
        this._db = null
        // 執行個體
        this._instance = null
        // store Name
        this._storeName = IDBProvider._storeName
    }

    get transaction() {
        return this._db.transaction([this._storeName], IDBTransaction.READ_WRITE || 'readwrite')
    }

    _toPromise(method, ...args) {
        try {
            return new Promise((resolve, reject) => {
                // 獲得事務
                let trans = this.transaction
                // 獲得請求
                let req = trans.objectStore(this._storeName)[method](...args)
                // 請求成功
                req.onsuccess = event => resolve(event.target.result)
                // 請求失敗
                req.onerror = event => reject(req.error)
                // 事務失敗
                trans.onerror = event => reject(trans.error)
            })
        } catch (err) {
            Promise.reject(err)
        }
    }

    static getInstance(dbVersion = 1.0) {
        if (this._instance) {
            Promise.resolve(this._instance)
        }
        return new Promise((resolve, reject) => {
            let request = _indexedDB_.open(IDBProvider._dbName, dbVersion)
            request.onerror = event => {
                return reject(null)
            }
            request.onsuccess = event => {
                let db = request.result
                // 老版本，新版本是onupgradeneeded
                if (db.setVersion && db.version !== dbVersion) {
                    var setVersion = db.setVersion(dbVersion);
                    setVersion.onsuccess = function () {
                        db.createObjectStore(this._storeName)
                        this._instance = new IDBProvider()
                        this._instance._db = request.result
                        return resolve(this._instance)
                    }
                } else {
                    this._instance = new IDBProvider()
                    this._instance._db = request.result
                    return resolve(this._instance)
                }
            }
            request.onupgradeneeded = event => {
                event.target.result.createObjectStore(this._storeName)
            }
        })
    }

    /**
     * 擷取檔案 
     * @param {*String} path 
     */
    getFile(path) {
        return this._toPromise('get', path)
    }

    /**
     * 寫入檔案
     * @param {*String} path 路徑
     * @param {*String|Blob} content 内容 
     * @param {*String} type 
     * @param {*String} append 暫無用
     */
    async writeToFile(path, content, type = null, append = false) {
        let data = content
        // 不是blob，轉為blob
        if (content instanceof ArrayBuffer) {
            data = new Blob([new Uint8Array(content)], { type })
        } else if (typeof content === 'string') {
            data = new Blob([content], { type: 'text/plain' })
        } else {
            data = new Blob([content])
        }
        await this._toPromise('put', data, path)
        return this.getFile(path)

        /*
        return new Promise((resolve, reject) => {
            let data = content
            // 不是blob，轉為blob
            if (content instanceof ArrayBuffer) {
                data = new Blob([new Uint8Array(content)], { type })
            } else if (typeof content === 'string') {
                data = new Blob([content])
            }
 
            // 存入資料
            let trans = this.transaction
            trans.objectStore(this._storeName).put(data, path)
 
            trans.objectStore(this._storeName).get(path).onsuccess = event => {
                resolve(event.target.result)
            }
 
            trans.onerror = event => {
                reject(trans.error)
            }
        }) */
    }

    readEntries(path = '') {
        if (!path) {
            return this.readAllEntries()
        }
        return this._toPromise('getAllKeys', IDBKeyRange.lowerBound(path)).then(r => r.filter(p => {
            // 以目前路徑開頭 && （截斷目前為空字元串，或者截斷後以/開頭）
            return p.indexOf(path) === 0 && (p.substring(path.length) === '' || p.substring(path.length).indexOf('/') === 0)
        }))
    }

    readAllEntries() {
        return this._toPromise('getAllKeys')
    }

    ensureDirectory(directory = '') {
        return Promise.resolve(directory)
    }

    clear() {
        return this._toPromise('clear').then(r => true)
    }

    /**
     * 加工處理path，比如特殊字元，比如以/開頭等等
     * @param {*String} path 
     */
    _handlePath(path) {
        return path
    }
}

IDBProvider._dbName = '_fs_db_'
IDBProvider._storeName = '_fs_store'


// 測試語句
// 讀取某個目錄的子目錄和檔案：  IDBProvider.getInstance().then(fs=>fs.readEntries()).then(f=>console.log(f))
// 寫檔案         IDBProvider.getInstance().then(fs=>fs.writeToFile('music/txt.txt','愛死你')).then(f=>console.log(f))
// 擷取檔案：     IDBProvider.getInstance().then(fs=>fs.getFile('music/txt.txt')).then(f=>console.log(f))
// 遞歸建立目錄：  IDBProvider.getInstance().then(fs=>fs.ensureDirectory('music/vbox')).then(r=>console.log( r))
// 遞歸擷取：     IDBProvider.getInstance().then(fs=>fs.readAllEntries()).then(f=>console.log(f))
// 删除所有：     IDBProvider.getInstance().then(fs=>fs.clear()).then(f=>console.log(f)).catch(err=>console.log(err))       

引用：

Indexed Database API Indexed DB API  使用 IndexedDB Basic concepts - Web APIs | MDN Storing images and files in IndexedDB IndexedDB 開發指南 http://www.tfan.org/using-indexeddb/