Over the years the Browsers have improved from been just a text reader to a whole big machine that served as home for all websites, and web applications today.
The part of the browser features that caught my attention the most is the Browsers Storage (local and session Storage), the browsers storage gives developers the ability to build persistent Web Application User Interface.
What are Browsers Storage ?
Browsers Storage namely localStorage, sessionStorage, indexedDB, shared Database etc, are features which are available in the browser to store data in various ways and conditions.
VanillaDb ?
VanillaDb is a tiny little tools that is built on top of browsers storage to make working with browser storages more seamless.
i will be implementing how to use this tiny tool (vanillaDb) in your applications when required, i will do this by building a small web Application called rosters-list-app.
rosters-list-app is a web application that store team roasters, and display the players name.
starting the project, i will be using Vite to start a react project, after Vite is done, delete the files that comes with Vite and arrange all your files, now install vanillaDb into your project using
npm i vanilla-db
after installing the package it's time to code.
firstly i want to create two states in main.jsx folder, one for all players list the other is for the new player name we are adding,
now we can create a form to input new player name and store them in browsers storage using vanillaDb, the form goes like this.
on the form we have a function called "handle" that run when we submit the form, inside the function we create a data object and the config that will help vanillaDB to store the data.
the config contains the database we want to use (in this case localStorage), the database key and the data we want to store, vanillaDb.set(config) will store the data in the browsers localStorage.
now, what about how to get the data stored ? easy, to get the data store call vanillaDb.get() and pass in query that points to the data you stored.
the query contains the browsers database used and the database key.
Now the Web Application is working well the datas are stored and rendered successfully.
VanillaDb is a tiny tool that comes with some other features you will like to try out, trust me you will want to check our this tiny tool to do so check the links below.
GitHub: https://github.com/Seyifunmitan/vanilla-db
NPM: https://www.npmjs.com/package/vanilla-db
Top comments (0)