Comment implémenter une base de données locale en javascript ? (analyse détaillée)

Le contenu de cet article explique comment implémenter une base de données locale en JavaScript ? (Analyse détaillée), il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Le front-end a souvent besoin de sauvegarder certaines données, et la sauvegarde ici fait référence au stockage à long terme. L'idée précédente était de sauvegarder les données dans le cookie, ou de sauvegarder la clé dans le cookie, et de sauvegarder d'autres données sur le serveur.

Ces scènes ont de nombreuses utilisations et sont très matures et faciles à utiliser. Mais je veux toujours un type de données qui puisse être sauvegardé localement pendant une longue période, similaire à une base de données ou similaire à Web SQL.

La nouvelle génération de navigateurs prend essentiellement en charge les bases de données locales. Utilisez-les simplement lorsque vous en avez besoin. Si cela ne fonctionne pas, vous pouvez toujours utiliser le stockage pour vous débrouiller.

Que faire si j'ai besoin des fonctionnalités d'une base de données et qu'il n'existe aucune méthode de stockage compatible ? Que se passe-t-il si je souhaite également chiffrer et stocker ces éléments localement ? Et si je veux sauvegarder beaucoup de choses ?

Je vis actuellement cette situation lorsque j'utilise React Native. J'ai besoin de stocker beaucoup de données localement. Quelqu'un a dit, ne serait-il pas préférable d'utiliser SQLite directement ?

D'accord, tout à fait bien. Je le développe simplement à partir d'une attitude frontale ici. Que se passe-t-il si certains étudiants n’ont pas besoin de SQLite, mais ont simplement besoin d’un moyen simple de stocker une grande quantité de données ?

Il peut y avoir de nombreux scénarios d'utilisation, la couche inférieure de l'implémentation peut être remplacée à volonté, et même la méthode d'implémentation peut être écrite à volonté. Ici, je construis un référentiel de données informel et convivial, basé sur l'attitude du front-end créant le monde.

Stockage sous-jacent

Le scénario d'utilisation ici est React Native, j'utilise donc AsyncStorage de RN.

Convertissez toutes les données à enregistrer en objets et en chaînes. L'idée centrale ici est la sérialisation. Stockez toutes les données sous forme de chaînes.

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;

}

Ce qui nécessite un traitement spécial, c'est l'acquisition de la liste. RN dispose d'une API qui renvoie plusieurs éléments de données basés sur plusieurs clés.

Il renvoie un objet tableau. Le numéro de tableau 0 est la valeur clé du stockage de données et le numéro 1 est la chaîne spécifique du stockage de données.

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

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

}

Supprimons également quelques autres méthodes utilisées. Imbibez une couche supplémentaire ici, en gardant la même formation que ci-dessus.

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

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

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

Optimisation sous-jacente

Ce qui précède n'est qu'une simple implémentation S'il n'y a pas d'exigences particulières, ce sera presque la même chose. Cependant, si vous souhaitez aller plus loin, vous pouvez envisager une optimisation.

Par exemple, optimisez la vitesse de conversion JSON. Lorsque nous utilisons la méthode objet JSON pour convertir, il existe en fait un processus de détermination du type numérique. Si nous définissons le type de données à l'avance. Il n'est pas nécessaire de juger à nouveau lors de la conversion.

Vous pouvez définir un objet modèle et prédéfinir les champs requis par cette table. Vous pouvez jeter un œil à la façon dont Sequelize est défini. Il est très simple de le faire selon la méthode des bases de données relationnelles.

//用户对象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,

});

Implémentation du stockage

Nous faisons ici référence à la mise en œuvre d'une base de données relationnelle.

Tout d'abord, vous devez créer un sous-tableau et une sous-base de données. De cette façon, vous pouvez accorder moins d’attention à ces informations lors du stockage des données et vous concentrer sur les opérations sur les données.

constructor(tableName = "table", db = "db") {        //检查库,表是否存在

       //初始化索引表

       this.db = db;        
       this.tableName = tableName;        
       this.tableKey = db + "_" + tableName;        
       this.init();

   }

Stockez-les séparément dans l'objet actuel lors de la création de l'objet, vous pouvez créer différentes méthodes de fonctionnement basées sur différentes bibliothèques et tables.

La classe est utilisée ici, et chaque table correspond à un objet distinct.

Puisque nous utilisons la méthode de stockage fournie par RN, l'ajout et la mise à jour ici sont en fait la même méthode.

Lors de l'ajout, un identifiant unique sera créé en fonction de l'horodatage actuel, et cet identifiant sera utilisé comme clé pour le stocker dans la base de données.

Il n'est donc pas nécessaire de stocker l'identifiant séparément lors de son utilisation. Cependant, si vous estimez que cet identifiant est différent de ce dont vous avez besoin, vous pouvez également définir vous-même un identifiant à stocker comme valeur clé.

//添加和更新

   async add(data = {}) {        
   if (data.constructor !== Object) return;        
   if (!data._id)data._id = uuid();

       await setItem(this.tableKey + "_" + data._id, data);        
       return data;

   }

fournit une méthode distincte pour obtenir en fonction de l'identifiant lors de l'obtention. Ce qui est considéré ici, c'est qu'il est très simple et pratique d'obtenir via l'identifiant. Certaines données peuvent être lues rapidement et il n'est pas nécessaire d'interroger ligne par ligne.

/**

* 通过id查询

* @param {*} id

*/
async getById(id) {    
if (!id) return {};    
return await getItem(this.tableKey + "_" + id);

}

Par rapport aux requêtes basées sur l'identifiant, la requête floue est en effet très lente. Si elle n'est pas vraiment nécessaire, il vaut mieux ne pas utiliser cette requête floue.

Fournit ici une méthode de requête personnalisée, qui peut déterminer si cette ligne de données est nécessaire en fonction de l'objet renvoyé.

Vous pouvez également ajouter le paramètre top pour limiter le nombre renvoyé. L'utilisation de ce paramètre peut également améliorer les performances lorsqu'il y a beaucoup de données.

Requête par méthode de filtrage

* @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;

}

Enfin, ajoutez les méthodes de suppression et d'effacement, et une bibliothèque de suppression simple est complétée.

/**

* 删除

* @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);

}

Lors de son utilisation, il vous suffit de créer l'objet puis de l'appeler si nécessaire. Il est simple et pratique à utiliser, et après optimisation, il peut même être utilisé comme Redis côté client.

//初始化数据库
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()

Optimiser la création

La première chose à optimiser est la création d'objets. Chaque création d'objet consomme en réalité beaucoup d'argent. Ne serait-il pas formidable que cette consommation puisse être réduite ?

Nous nous appuyons ici sur le concept de pool de bases de données pour implémenter une méthode de pool d'objets. Il n'y a pas de retour direct après la création de l'objet, il doit passer par l'opération pool.

将对象放入池内，并在页面销毁的时候重置为一个空对象。下次请求创建的时候就不必再创建新的了。直接赋值表、库的名称就可以使用了。内存毫无变化，并且有点想笑。

优化查询

每次查询都需要去读 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 上，后续的优化也会慢慢地开源出来。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!