Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zediculz/vanilla-db
VanillaDb is a lightweight browser database library thats built on top of localStorage and sessionStorage.
https://github.com/zediculz/vanilla-db
broswer browser-storage database javascript localstorage sessionstorage
Last synced: 4 days ago
JSON representation
VanillaDb is a lightweight browser database library thats built on top of localStorage and sessionStorage.
- Host: GitHub
- URL: https://github.com/zediculz/vanilla-db
- Owner: zediculz
- Created: 2023-08-26T06:14:17.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-02-07T21:53:04.000Z (about 1 year ago)
- Last Synced: 2025-01-17T11:17:36.516Z (about 1 month ago)
- Topics: broswer, browser-storage, database, javascript, localstorage, sessionstorage
- Language: JavaScript
- Homepage:
- Size: 444 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# VanillaDb
VanillaDb is a lightweight browser database library thats built on top of localStorage and sessionStorage.
## Installation
```bash
npm install --save vanilla-db@latest
```
Once the package is installed, you can import the library using import vanillaDb```javascript
import { vanillaDb } from 'vanilla-db'
```## Documentation
### Storing Datato store data using vanillaDb
```javascript
const config = {
db: 'local', // or 'session', 'localStorage', 'sessionStorage',
key: 'my-database-key' ,
data: {
name: 'John Doe',
age: 40,
role: 'React Developer'
}
}vanillaDb.set(config)
```
to Get stored data, call the set() method and pass an object with
key: Database key,
db: which can either be "local || localStorage" or "session || sessionStorage" ,
data: the data you are storing (which can be arrays, object, or just a variable or state).### Getting Data
VanillaDb uses key-value pair method in storing datas, you will be able to get the stored data by referencing its database key.```javascript
const query = {
db: 'local', // or 'session', 'localStorage', 'sessionStorage',
key: 'my-database-key',
option: 'all' || 'only'
}vanillaDb.get(query)
```
to Get stored data, call the get() method and pass an object with
db: the database data is stored
key: database key.
option: to either return all the Database or only the data stored.### Sync Data
sync(copy) allow you to copy or move data within sessionStorage and localStorage,```javascript
const config = {
from: 'local',
to: 'session',
key: 'my-data' ,
options: {
deleteOld: true // or false,
newKey: 'my-synced-data'
}
}vanillaDb.sync(config)
```to use sync(copy) create an object with
from: the database you can are copying/syncing data from,
to: the new database you are copying/syncing to
key: the key of the database you want to copy/sync.options contains
deleteOld: which can either be true or false to delete old stored data
newKey: for the new data synced.## More Features
- remove(db) - remove the data stored in Database
- length(db) - return the length of data stored in Database
- request(db) - fetch data from api (mostly get) and store the data in database for offline usage.### Usage/Examples
```javascript
const query = {
db: 'local' // 'session',
key: 'your database key',
}vanillaDb.remove(query)
```
query contains the database you stored your data and the key of the database you want to remove.```javascript
const db = 'local' // 'session',vanillaDb.length(db)
```
db is the Database you stored data or the Database you which to know its length.```javascript
import { vanillaDb } from 'vanilla-db'const config = {
url: 'api endpoint',
db: 'local' // 'session',
key: 'database key',
options: {'fetch request options'}
}vanillaDb.request(config)
```
db is the Database you stored data.[](https://www.npmjs.com/package/vanilla-db)
[](https://standardjs.com)
[](https://twitter.com/zediculz)
## License
MIT ©