本篇文章帶給大家的內容是關於javascript如何實作一個本地資料庫？ （詳細分析），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
在前端很多時候還是需要保存一些資料的，這裡的保存指的是長久的保存。以前的想法是把資料保存在 Cookie 中，或是將 key 保存在 Cookie 中，將其他資料保存在伺服器上。
這幾個場景用處很多，也非常成熟好用。但是我還是想要一種能夠長久保存在本地的數據，類似資料庫或類似 Web SQL。
新一代瀏覽器基本上都支援了本地資料庫，需要用的時候直接使用就好了。實在不行還可以使用 Storage 將會就一下。
假如我需要的是一個資料庫那種功能並且沒有相容的儲存方式呢？假如我還要加密儲存這些東西在本地呢？假如我要存的東西非常多呢？
目前我在使用 React Native 的時候確實遇到了這種情況。我需要將非常多的資料存在本地。有人說了，直接使用 SQLite 不就好了麼？
好啊，完全可以啊。我這裡僅僅是本著前端的態度去開發而已。假如有的同學不需要 SQLite 呢，只需要一個簡單的，能夠儲存一些大量資料的方式呢？
使用場景可能有很多，實現的底層也可以隨便替換，甚至實作方式都可以隨便寫寫。這裡我本著前端創造世界的態度來做一個非正式的、前端好使的資料儲存庫。
底層儲存
這裡的使用場景是 React Native，所以我使用的是 RN 的 AsyncStorage。
將所有要儲存的資料轉成對象，並轉換為字串。這裡的核心思想就是序列化。將所有資料當成字串來存。
import { AsyncStorage } from 'react-native';
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('t_users', {
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 端的。
我们可以将上次读取的数据先存在一个变量中，如果下次还需要使用这行数据，就完全不需要再去读取了。这样就可以很简单的提供读取速度。
//按照使用情况保存数据到缓存
async getById(id) {
if (!id) return {};
id = this.tableKey + "_" + id; //如果有缓存
if (this.cacheList.has(id)) {
let tmp = this.cacheList.get(id); //如果过量了
if (this.cacheKeyList.length > 20) {
this.cacheKeyList.push(id);
let k = this.cacheKeyList.shift();
this.cacheList.delete(k);
}
return tmp;
}
this.cacheKeyList.push(id);
this.cacheList.set(tmp);
return await getItem(id);
}这个方式还可以继续优化。将变量中保存的数据限制数量，防止数量太多超过了 App 的限制。
还可以将这个保存的时限做一个逻辑判断，常使用的数据放在里面，不常用的就找机会删除。
使用这种方式也可以优化变量中数据的有效性，减少变量占用内存的大小。
不过实现的方式尽量不要使用定时器的形式，可以考虑使用触发式的。在条件满足的时候再触发删除动作。
优化写入
上面提到读取的时候需要放入变量来提高读取速度。我们顺便想到写入的速度是不是也可以提高啊？
我们将要存的数据放在临时的变量里，如果超过我们设置的时间或者数据长度超过我们设置的数量就触发一次保存操作。
这里要注意，保存数据的变量和存入时候使用的变量要交替使用，防止出现丢数据的情况。
比如：存的时候使用变量1，在写到数据库之前，将要存的对象改成变量2，然后读取变量1的数据并存入数据库中。这就是双缓存写入。
当然还是要判断一次 App 退出事件的，如果 App 退出了，请一定要把变量中的内容保存一次，不然你的心血就全丢了。
注意写入要和上面的读取结合起来，不然就会发现写入的数据会有一个很大的延迟。
//添加和更新
async add(data = {}) {
if (data.constructor !== Object) return;
data._id = uuid();
const key = this.tableKey + "_" + data._id
this.writeList.set(key, data);
this.write(); //this.read();
return data;
}
//写入的实现,now立马写入
write(now = false) {
if (now || this.writeList.size > 20) {
let tmp = this.writeList;
this.writeList = this.backWriteList;
this.backWriteList = tmp;
this.backWriteList.forEach((v, k) => {
setItem(k, v);
})
}
}好了，一个简单的数据库就完成了。想要使用的可以先在 npm 上搜索 react-native-jsdb 这个库。我已经将第一部分实现放在了 npm 上，后续的优化也会慢慢地开源出来。
以上是javascript如何實作一個本地資料庫？ （詳細分析）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
