js開發資料庫的執行個體分享-js教程-PHP中文網

前端很多時候還是需要保存一些資料的，這裡的保存指的是長久的保存。以前的想法是把資料保存在cookie中，或是將key保存在cookie中，將其他資料保存在伺服器上。這幾個場景用處很多，也非常的成熟好用。但我還是想要一種能夠長久的保存在本地的數據，類似資料庫或類似web sql。

新一代瀏覽器基本上都支援了本地資料庫，需要用的時候直接使用就好了。實在不行還可以使用Storage將就一下。

假如我需要的是一個資料庫那種功能並且沒有相容的儲存方式呢？加入我還要加密儲存這些東西在本地呢？加入我要存的東西非常多呢？

目前我在使用ReactNative的時候確實遇到了這種情況。我需要將非常多的資料存在本地。有人說了，直接使用sqlite不就好了麼？

好啊，完全可以啊。我這裡僅僅是本著前端的態度去開發而已。如果有的同學不需要sqlite呢，只需要一個簡單的，能夠儲存一些大量資料的方式呢？

使用場景可能有很多，實現的底層也可以隨便替換，甚至實作方式都可以隨便寫寫。這裡我本著前端創造世界的態度來做一個非正式的、前端好使的資料儲存庫。

底層儲存

這裡的使用場景是ReactNative，所以我使用的是RN的AsyncStorage。

將所有要儲存的資料轉成對象，並轉換為字串。這裡的核心思想就是序列化。將所有資料當成字串來存。

import { AsyncStorage } from &#39;react-native&#39;;

exports.setItem = async (key, value) => {    let item = JSON.stringify({
        v: value
    });    return await AsyncStorage.setItem(key, item);
}

登入後複製

當讀取的時候也需要做一次轉化，將字串轉成當初存入的資料。

exports.getItem = async (key) => {    let item = await AsyncStorage.getItem(key);    if (!item) {        return null;
    }    return JSON.parse(item).v || null;
}

登入後複製

需要特殊處理的是清單的取得。 RN有一個根據多個key傳回多個資料的api。它回傳的是一個數組對象，數組序號0是資料儲存的key值，序號1才是資料儲存的具體字串。

exports.getlist = async (keys) => {    let list = await AsyncStorage.multiGet(keys);
    list = list.map(item => JSON.parse(item[1]).v || null);    return list;
}

登入後複製

其他用到的幾個方法也順便拿出來。這裡多嵌套一層，跟上面的保持隊形。

exports.removeItem = async (key) => await AsyncStorage.removeItem(key);

exports.removeItems = async (keys) => await AsyncStorage.multiRemove(keys);

exports.allKeys = async () => await AsyncStorage.getAllKeys();

登入後複製

底層優化

上面只是簡單的實現，如果沒有特殊需求也就差不多了。但是，想要更進一步的可以考慮開始優化了。

例如，優化json轉換的速度。我們使用JSON物件的方法去轉換的時候其實還有一個判斷數值類型的過程。如果我們把數據的型別提前定義好。再轉換的時候就不需要再判斷了。

可以定義一個model對象，將這個表需要的欄位預先定義好。可以查看一下Sequelize的定義方式。按照關係行資料庫的方式來搞這個事情就很簡單了。

//用户对象const users = db.define(&#39;t_users&#39;, {
    id: {
        type: Sequelize.INTEGER,
        primaryKey: true,
    },    //用户名
    username: {
        type: Sequelize.STRING
    },    //密码
    pwd: {
        type: Sequelize.STRING
    },    //状态
    status: {
        type: Sequelize.INTEGER
    },    //昵称
    nickname: {
        type: Sequelize.STRING
    },    //token
    token: {
        type: Sequelize.STRING
    },
    create_time: {
        type: Sequelize.TIME
    }
}, {
    freezeTableName: true,
    timestamps: false,
});

登入後複製

實作儲存

我們這裡參考一下關係型資料庫的實作。

首先需要分錶和分庫。這樣在存入數據的時候可以更少的關注這方面的信息，將主要精力放在數據操作上。

constructor(tableName = "table", db = "db") {        //检查库,表是否存在
        //初始化索引表
        this.db = db;        this.tableName = tableName;        this.tableKey = db + "_" + tableName;        this.init();
    }

登入後複製

將它們分開儲存在目前物件內部，在建立物件的時候就可以根據不同的函式庫、表格建立不同的操作方法。這裡使用的是class，每個表都對應一個單獨的物件。

由於我們使用的是RN提供的儲存方法，所以這裡的新增和更新其實是一個方法。在新增的時候會根據目前時間戳記建立一個唯一id，使用這個id作為key儲存在資料庫中。所以使用的時候不需要再單獨存入id，不過如果你覺得這個id跟你需要的有差別也可以自己定義一個id來當key值儲存。

//添加和更新
    async add(data = {}) {        if (data.constructor !== Object) return;        if (!data._id)data._id = uuid();
        await setItem(this.tableKey + "_" + data._id, data);        return data;
    }

登入後複製

在獲取的時候單獨提供了一個根據id獲取的方式。這裡考慮的是透過id取得非常的簡單方便，對於某些資料完全可以快速讀取，沒必要一行一行的去查詢。

/**
 * 通过id查询
 * @param {*} id 
 */async getById(id) {    if (!id) return {};    return await getItem(this.tableKey + "_" + id);
}

登入後複製

相對於根據id查詢來說，模糊查詢確實很慢，如果不是真實需要，還是不要使用這種模糊查詢的好。這裡提供了一個自訂查詢的方法，可以根據傳回的物件判斷是否需要這行資料。同時也可以加入top參數來限制回傳的數量。使用這個參數也可以在資料很多的時候提高效能。

/**
 * 通过过滤方法查询
 * @param {*} fn 
 */async get(fn, top = 0) {    let keys = await allKeys();    if (keys.length == 0) return [];    if (top > 0 && keys.length > top) keys.length = top;    const listkey = keys.filter(item => item.indexOf(this.tableKey + "_") === 0);    if (listkey.length == 0) return [];    let list = await getlist(listkey);
    list = list.filter(item => fn(item));    return list;
}

登入後複製

最後把刪除和清空的方法加上，這樣一個簡單的刪除函式庫就完成了。

 /**
 * 删除
 * @param {*} id 
 */async delete(id) {    if (!id) return {};
    await removeItem(this.tableKey + "_" + id);
}/**
 * 清空表
 */async clear() {    let keys = await allKeys();    const listkey = keys.filter(item => item.indexOf(this.tableKey + "_") === 0);    if (listkey.length == 0) return;
    removeItems(listkey);
}

登入後複製

使用的時候只需要建立對象，然後在需要的地方呼叫即可。使用起來簡單又方便，再加上優化之後的情況甚至可以當成客戶端的redis來使用。

//初始化数据库let db=new JSDB();//添加一个自定义数据db.add({name:"test",key:"abc"});//根据id获取数据db.getById("1223467890");//根据条件查询数据db.get(d=>d.name==="test");//删除对应的数据db.delete("1223467890");//情况所有数据db.clear()

登入後複製

優化建立

首先要最佳化的就是物件的建立。每個物件創建其實都是一個很大的消耗，如果能把這個消耗降低豈不是美滋滋！

這裡我們借鏡資料庫的概念，實作一個物件池的方法。在物件創建之後並沒有直接返回，要在經過池的操作。

將物件放入池內，並在頁面銷毀的時候重置為空物件。下次請求創建的時候就不必再創建新的了。直接賦值表、函式庫的名稱就可以使用了。記憶體毫無變化，有點想笑。

優化查詢

每次查詢都需要去讀Stroage還是很麻煩的，尤其這個操作是非同步操作，是需要發送訊息到native端的。

我們可以先將上次讀取的資料存在一個變數中，如果下次還需要使用這行數據，就完全不需要再去讀取了。這樣就可以很簡單的提供讀取速度。

這個方式還可以繼續優化。將變數中保存的資料限制數量，防止數量太多超過了APP的限制。也可以將這個保存的時限做一個邏輯判斷，常使用的資料放在裡面，不常用的就找機會刪除。

使用這種方式也可以最佳化變數中資料的有效性，減少變數佔用記憶體的大小。不過實現的方式盡量不要使用定時器的形式，可以考慮使用觸發式的。在條件滿足的時候再觸發刪除動作。

優化寫入

上面提到讀取的時候需要放入變數來提高讀取速度。我們順便想到寫入的速度是不是也可以提高啊？

我們將要存的資料放在暫時的變數裡，如果查過我們設定的時間或資料長度查過我們設定的數量就觸發一次儲存操作。

這裡要注意，儲存資料的變數和存入時候使用的變數要交替使用，防止遺失資料的情況。

例如：存的時候使用變數1，在寫到資料庫之前，將要存的物件改成變數2，然後讀取變數1的資料並存入資料庫中。這就是雙快取寫入。

當然還是要判斷一次APP的退出事件的，如果APP退出了，請一定要把變數中的內容保存一次，不然你的心血就全丟了。

好了，一個簡單的資料庫就完成了。想要使用的可以先在npm上搜尋react-native-jsdb這個函式庫。我已經將第一部分實作放在了npm上，後續的優化也會滿滿的開源出來的。

npm倉庫地址

文章地址

#前端很多時候還是需要保存一些資料的，這裡的保存指的是長久的保存。以前的想法是把資料保存在cookie中，或是將key保存在cookie中，將其他資料保存在伺服器上。

這幾個場景用處很多，也非常的成熟好用。但我還是想要一種能夠長久的保存在本地的數據，類似資料庫或類似web sql。

新一代瀏覽器基本上都支援了本地資料庫，需要用的時候直接使用就好了。實在不行還可以使用Storage將就一下。

假如我需要的是一個資料庫那種功能並且沒有相容的儲存方式呢？加入我還要加密儲存這些東西在本地呢？加入我要存的東西非常多呢？

目前我在使用ReactNative的時候確實遇到了這種情況。我需要將非常多的資料存在本地。有人說了，直接使用sqlite不就好了麼？

好啊，完全可以啊。我這裡僅僅是本著前端的態度去開發而已。如果有的同學不需要sqlite呢，只需要一個簡單的，能夠儲存一些大量資料的方式呢？

底層儲存

這裡的使用場景是ReactNative，所以我使用的是RN的AsyncStorage。

將所有要儲存的資料轉成對象，並轉換為字串。這裡的核心思想就是序列化。將所有資料當成字串來存。

import { AsyncStorage } from &#39;react-native&#39;;

exports.setItem = async (key, value) => {    let item = JSON.stringify({
        v: value
    });    return await AsyncStorage.setItem(key, item);
}

登入後複製

當讀取的時候也需要做一次轉化，將字串轉成當初存入的資料。

exports.getItem = async (key) => {    let item = await AsyncStorage.getItem(key);    if (!item) {        return null;
    }    return JSON.parse(item).v || null;
}

登入後複製

exports.getlist = async (keys) => {    let list = await AsyncStorage.multiGet(keys);
    list = list.map(item => JSON.parse(item[1]).v || null);    return list;
}

登入後複製

其他用到的幾個方法也順便拿出來。這裡多嵌套一層，跟上面的保持隊形。

exports.removeItem = async (key) => await AsyncStorage.removeItem(key);

exports.removeItems = async (keys) => await AsyncStorage.multiRemove(keys);

exports.allKeys = async () => await AsyncStorage.getAllKeys();

登入後複製

底層優化

上面只是簡單的實現，如果沒有特殊需求也就差不多了。但是，想要更進一步的可以考慮開始優化了。

可以定義一個model對象，將這個表需要的欄位預先定義好。可以查看一下Sequelize的定義方式。按照關係行資料庫的方式來搞這個事情就很簡單了。

//用户对象const users = db.define(&#39;t_users&#39;, {
    id: {
        type: Sequelize.INTEGER,
        primaryKey: true,
    },    //用户名
    username: {
        type: Sequelize.STRING
    },    //密码
    pwd: {
        type: Sequelize.STRING
    },    //状态
    status: {
        type: Sequelize.INTEGER
    },    //昵称
    nickname: {
        type: Sequelize.STRING
    },    //token
    token: {
        type: Sequelize.STRING
    },
    create_time: {
        type: Sequelize.TIME
    }
}, {
    freezeTableName: true,
    timestamps: false,
});

登入後複製

實作儲存

我們這裡參考一下關係型資料庫的實作。

首先需要分錶和分庫。這樣在存入數據的時候可以更少的關注這方面的信息，將主要精力放在數據操作上。

constructor(tableName = "table", db = "db") {        //检查库,表是否存在
        //初始化索引表
        this.db = db;        this.tableName = tableName;        this.tableKey = db + "_" + tableName;        this.init();
    }

登入後複製

将它们分开存储在当前对象内部，在创建对象的时候就可以根据不同的库、表创建不同的操作方法。这里使用的是class，每个表都对应一个单独的对象。

由于我们使用的是RN提供的存储方法，所以这里的添加和更新其实是一个方法。在添加的时候会根据当前时间戳创建一个唯一id，使用这个id作为key存储在数据库中。所以在使用的时候不需要再单独存入id，不过如果你觉得这个id跟你需要的有差别也可以自己定义一个id来作为key值存储。

//添加和更新
    async add(data = {}) {        if (data.constructor !== Object) return;        if (!data._id)data._id = uuid();
        await setItem(this.tableKey + "_" + data._id, data);        return data;
    }

登入後複製

在获取的时候单独提供了一个根据id获取的方式。这里考虑的是通过id获取非常的简单方便，对于某些数据完全可以快速读取，没必要一行一行的去查询。

/**
 * 通过id查询
 * @param {*} id 
 */async getById(id) {    if (!id) return {};    return await getItem(this.tableKey + "_" + id);
}

登入後複製

相对于根据id查询来说，模糊查询确实很慢，如果不是真实需要，还是不要使用这种模糊查询的好。这里提供了一个自定义查询的方法，可以根据返回的对象判断是否需要这行数据。同时也可以添加top参数来限制返回的数量。使用这个参数也可以在数据很多的时候提高性能。

/**
 * 通过过滤方法查询
 * @param {*} fn 
 */async get(fn, top = 0) {    let keys = await allKeys();    if (keys.length == 0) return [];    if (top > 0 && keys.length > top) keys.length = top;    const listkey = keys.filter(item => item.indexOf(this.tableKey + "_") === 0);    if (listkey.length == 0) return [];    let list = await getlist(listkey);
    list = list.filter(item => fn(item));    return list;
}

登入後複製

最后把删除和清空的方法加上，这样一个简单的删除库就完成了。

 /**
 * 删除
 * @param {*} id 
 */async delete(id) {    if (!id) return {};
    await removeItem(this.tableKey + "_" + id);
}/**
 * 清空表
 */async clear() {    let keys = await allKeys();    const listkey = keys.filter(item => item.indexOf(this.tableKey + "_") === 0);    if (listkey.length == 0) return;
    removeItems(listkey);
}

登入後複製

使用的时候只需要创建对象，然后在需要的地方调用即可。使用起来简单又方便，再加上优化之后的情况甚至可以当成客户端的redis来使用。

//初始化数据库let db=new JSDB();//添加一个自定义数据db.add({name:"test",key:"abc"});//根据id获取数据db.getById("1223467890");//根据条件查询数据db.get(d=>d.name==="test");//删除对应的数据db.delete("1223467890");//情况所有数据db.clear()

登入後複製