JavaScriptでローカルデータベースを実装するにはどうすればよいですか? （詳細な分析）

この記事の内容は、JavaScript でローカル データベースを実装する方法についてです。 （詳細な分析）、それが必要な友人がそれを参考にできることを願っています。

フロントエンドは多くの場合、データを保存する必要がありますが、ここでの保存とは長期保存を指します。以前のアイデアは、データを Cookie に保存するか、キーを Cookie に保存して、その他のデータをサーバーに保存するというものでした。

これらのシーンには多くの用途があり、非常に成熟していて使いやすいです。しかし、それでも、データベースや Web SQL に似た、ローカルに長期間保存できる種類のデータが必要です。

新世代のブラウザは基本的にローカル データベースをサポートしていますので、必要なときに直接使用してください。それが機能しない場合でも、ストレージを使用して対応できます。

データベースの機能が必要なのに、互換性のある保存方法がない場合はどうすればよいですか?これらを暗号化してローカルに保存したい場合はどうすればよいでしょうか?たくさんのものを保存したい場合はどうすればよいですか?

現在、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 には、複数のキーに基づいて複数のデータを返す API があります。

配列オブジェクトを返します。配列シリアル番号 0 はデータ ストレージのキー値、シリアル番号 1 はデータ ストレージの特定の文字列です。

exports.getlist = async (keys) => {    
let list = await AsyncStorage.multiGet(keys);

   list = list.map(item => JSON.parse(item[1]).v || null);    
   return list;

}

使用されている他のメソッドもいくつか取り上げてみましょう。ここにもう 1 つのレイヤーをネストし、上と同じ構成を維持します。

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

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

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

基礎的な最適化

上記は単純な実装です。特別な要件がなければ、ほぼ同じです。ただし、さらに前進したい場合は、最適化を検討できます。

たとえば、JSON 変換の速度を最適化します。 JSON オブジェクト メソッドを使用して変換する場合、実際には数値型を決定するプロセスが存在します。事前にデータ型を定義した場合。変換時に改めて判定する必要はありません。

モデル オブジェクトを定義し、このテーブルに必要なフィールドを事前定義できます。 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();

   }

これらを現在のオブジェクト内に個別に保存します。オブジェクトを作成するときに、さまざまなライブラリとテーブルに基づいてさまざまな操作メソッドを作成できます。

ここではクラスが使用されており、各テーブルは個別のオブジェクトに対応します。

RN が提供する保存方法を使用しているため、ここでの追加と更新は実際には同じ方法です。

追加すると、現在のタイムスタンプに基づいて一意の ID が作成され、この ID がデータベースに保存するためのキーとして使用されます。

したがって、使用するときに ID を個別に保存する必要はありません。ただし、ID が必要なものと異なると思われる場合は、キー値として保存する ID を自分で定義することもできます。

//添加和更新

   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 に基づくクエリと比較すると、ファジー クエリは実際に非常に遅くなります。実際に必要がない場合は、このファジー クエリを使用しない方がよいでしょう。

ここではカスタム クエリ メソッドが提供されており、返されたオブジェクトに基づいてこのデータ行が必要かどうかを判断できます。

先頭パラメータを追加して、返される数を制限することもできます。このパラメーターを使用すると、データが大量にある場合のパフォーマンスも向上します。

フィルタリングメソッドによるクエリ

* @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 中国語 Web サイトの他の関連記事を参照してください。