Faire une base de données locale

:salut: la communauté,


J'espère tout d'abord que tout le monde va bien.

Voici mon petit problème : je me suis fait une page web très simple qui n'est destinée qu'à fonctionner en local. Dans cette page, j'ai un formulaire lui aussi très simple avec 4 ou 5 <input>.
A coté de cette page, je souhaite avoir un fichier comportant une liste de meubles (chaise, bureau, table, ...) ainsi que leurs principales caractéristiques (hauteur, largeur, poids, matériaux, ...).

L'idée, vous l'aurez compris, est de lister les meubles qui répondront aux critères renseigner dans le formulaire. Le tout devant rester local.
Je me demande alors quelle pourrait être la meilleure façon de faire ceci.

Dans l'absolu si je pouvais avoir une base sqlite et lancer des requêtes SQL je serai le roi du monde. Mais sans serveur je crois que c'est mal barré.
J'ai pensé à de l'AJAX, mais le protocole file n'est pas pris en charge (à moins de lancer chrome d'une certaine manière et j'ai pas encore envisagé ceci).
Plus largement consulter un fichier XML ou JSON mais j'aurai le même souci qu'AJAX non ?

Pour le moment, la seule solution que je vois, c'est de tout mettre sous forme de tableau dans un autre fichier JS et de me palucher une belle fonction de recherche. Mais je me dis aussi que je passe peut-être à coté de quelque chose de plus simple.

Avez-vous une astuce ?


D'avance merci à tous.


Bye.

J

salut,

le plus simple que je vois, c'est in input type = file, et tu vas chercher un .json
une fois le fichier "recupere" par le navigateur, tu peux en faire ce que tu veux, et donc le parser et le sauvegarder dans le localstorage (par exemple, si tu ne veux pas aller chercher le fichier.json a chaque refresh)

[edit]
j'ai fais un petit script d'exemple
fichier .json :

Code:

---

1 2 3

{ "toto":"youpi" }

---

input

Code:

---

<input type="file" accept=".json" onchange="loadFile(event)">

---

script

Code:

---

1 2 3 4 5 6 7 8 9

function loadFile(e) { const input = e.target; const fr = new FileReader(); fr.readAsText(input.files[0]); fr.onload = () => { console.log(JSON.parse(fr.result)); //sauvegarde dans le localstorage }; }

---

:salut:


Avant tout désolé pour la réponse un peu tardive et surtout merci beaucoup pour ton aide.
Cette façon de faire est assez proche de ce que j'avais en tête en chargeant un objet Javascript, solution que je voulais mettre un peu de coté car pour moi un *.js n'est pas là pour stocker des data comme à la mode JSON ou XML.

Ce qui me gène par contre c'est le fait de devoir charger manuellement le fichier JSON. Il y a des manières de rendre ça +/- automatique mais ça rajoute quelques lignes de codes. Rien d'extraordinaire, mais je veux rester le plus concis possible.

Dans un premier temps je vais donc peut-être revenir sur l'idée de mettre mes data dans un dictionnaire lui-même stocké dans un *.js à part. C'est un peu dérouter le truc, mais bon.


Juste au cas où, plutôt que d'utiliser des document.getElementById ou JQuery pour rendre cette page web un tant soit peu dynamique, j'utilise Vue.js (V3). J'ai parcouru rapidement la doc en espérant trouver quelque chose dans l'API de Vue pour la lecture de fichier locaux mais rien. Si jamais je suis passé à coté d'un truc qui te sauterai aux yeux n'hésite pas :).

Une nouvelle fois merci à toi, car dans tous les cas, ton petit bout de code va me servir pour un autre projet ;).

[EDIT]
En farfouillant sur la toile, je suis tombé là-dessus... ça semble assez correspondre à mes besoins. D'autant que je n'aurai jamais 10 000 enregistrement dans ma base :).

Quelqu'un a un retour sur les dernières versions ?


Ciao.


J