Persistent key/value data storage for your Browser and/or PWA, promisified, including file support and service worker support, all with IndexedDB. Perfectly suitable for your next (PWA) app.

Overview

Logo

BrowstorJS ๐Ÿš€ ๐Ÿ’พ ๐Ÿ”’ Tests

Persistent key/value data storage for your Browser and/or PWA, promisified, including file support and service worker support, all with IndexedDB. Perfectly suitable for your next (PWA) app.

Features ๐Ÿ“ฃ

  • Simple Key/Value Data Storage in IndexedDB
  • Serve any storage value as a real URL (No Data URI) for Images, Files, etc...
  • Promisified for async/await support
  • Cross-Browser
    • Chrome (Mobile/Desktop incl. incognito mode)
    • Firefox (Mobile/Desktop but not in private mode)
    • Safari (Mobile/Desktop incl. partially in InPrivate Mode)
    • Edge New (Chromium incl. private mode)
    • Edge Old v17+
    • WebKit
    • and every other from the last years
    • No Internet Explorer :trollface:
  • Super Lightweight (~400 byte when gzipped, ~4kb uncompressed)
  • Notice: A word about persistence in current browsers...

Usage โšก

const db = await BrowstorJS.open() // get instance
await db.set('mykey', 'myvalue') // set a value
await db.get('mykey') // get a value
await db.getUrl('mykey') // get a URL that serves the value from this key (eg.: for images)
await db.getDataUri('mykey') // get a data uri (to use as image src for example) for the value of this key
await db.search((key, value) => { return key.startsWith('mykey') }) // search entries with condition
await db.remove('mykey') // remove a single key
await db.reset() // clear the database, delete all entries
await db.getKeys() // ['mykey', ...]
const db = await BrowstorJS.open('myotherdb') // get instance to a separate db
const isPersistent = await BrowstorJS.requestPersistentStorage() // request persistent storage
const info = await BrowstorJS.getStorageSpaceInfo() // {available:number, used:number, free:number}

Jump to Event registration inside service worker to make the function db.getUrl() to actually work.

Demo ๐Ÿ‘พ

Head to our demo page to see and test the library in action.

Install ๐Ÿ’ฟ

Variant Self-Hosted Self-Download

Download the latest release, unpack the dist/browstorjs.js and load it into your website <script src="browstorjs.js"></script>.

Variant using TypeScript

Download the latest release (Or use NPM to install the library) and include src/browstorjs.ts wherever you need it.

Variant using NPM

npm install browstorjs

You know how to pack the library into your website when you opt in for using npm. It depends on your environment how you integrate the dist file.

Variant using CDN (Not recommended but handy for quick tests)

Load it into your website <script src="https://cdn.jsdelivr.net/npm/browstorjs/dist/browstorjs.js"></script>.

Event registration inside service worker ๐ŸŽท

To make the generation of getUrl work, you need to handle some service worker events. If you don't need getUrl you also don't necessarily need a service worker.

This is the bare minimum inside a service worker, you can add your custom code after the BrowstorJS handlers.

importScripts('scripts/browstorjs.js')

self.addEventListener('activate', event => {
  if (BrowstorJS.handleServiceWorkerEvents(event)) return
  // place your additional app code here
})

self.addEventListener('fetch', event => {
  if (BrowstorJS.handleServiceWorkerEvents(event)) return
  // place your additional app code here
})

self.addEventListener('message', event => {
  if (BrowstorJS.handleServiceWorkerEvents(event)) return
  // place your additional app code here
})

Persistence - How browsers handle it :shipit:

One thing you must have definitely in mind is that, to date, persistence in browser is wanky. IndexedDB Storage is persistence over time and after browser is closed, yes, but it can be wiped easily. Even when your app is installed as a PWA. By cleanup jobs, by long inactivity, by history cleanup, etc...

For PWA (as of July 2022), unfortunetely, there is still no real 100% bullet-proof way to store data forever until the app is deleted, like you can do in native apps. We all hope that browser devs will fix this as soon as possible.

Here a few links to show how browser engines handle IndexedDB Storage, which BrowstorJS internally uses:

Development in this library ๐Ÿ’Œ

  1. Create an issue for features and bugs
  2. Checkout master
  3. Run npm install && npm ci && npx playwright install --with-deps
  4. After changing src/browserjs.ts, run npm run dist
  5. Check tests and add new tests to docs/test.html when adding new features
You might also like...

Promisified thunk with caching (pronounced "funky")

phunky phunky (promisified thunk, pronounced funky) is yet another thunk-inspired library, to delay a calculation until its result is needed, but also

Oct 14, 2022

History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState

History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype.

Dec 26, 2022

The full power of the Go Compiler directly in your browser, including a virtual file system implementation. Deployable as a static website.

The full power of the Go Compiler directly in your browser, including a virtual file system implementation. Deployable as a static website.

Static Go Playground Features Full Go Compiler running on the browser. Supports using custom build tags. Incremental builds (build cache). Supports mu

Jun 16, 2022

An example Worker for copying Cloudflare Pub/Sub messages to R2 storage

pubsub-to-r2 An example Cloudflare Worker that acts as an on-publish hook for Pub/Sub and copies a subset of messages to R2 object storage. To deploy

Jul 1, 2022

Grupprojekt fรถr kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet fรถr kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide Fรถr information om hur utv

May 18, 2022

This textlint rule found representations not suitable for English papers

This textlint rule found representations not suitable for English papers

Mar 1, 2022

Hemsida fรถr personer i Sverige som kan och vill erbjuda boende till mรคnniskor pรฅ flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

May 3, 2022

Kurs-repo fรถr kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

Jan 3, 2023

Fast Hugo gallery theme/module suitable for lots of images.

Fast Hugo gallery theme/module suitable for lots of images.

Gallery Deluxe A Hugo Module to show a photo gallery. It's very fast/effective, especially if you have lots of images on display. See the annotated in

Jan 2, 2023
Releases(1.2.0)
Owner
Nullix
Software&More from Austria.
Nullix
Tool to sign data with a Cardano-Secret-Key // verify data with a Cardano-Public-Key // generate CIP-8 & CIP-36 data

Tool to sign data with a Cardano-Secret-Key // verify data with a Cardano-Public-Key // generate CIP-8 & CIP-36 data

Martin Lang 11 Dec 21, 2022
Byteroo - Key-value storage for your Node.js applications

Byteroo Byteroo is a key-value storage for your Node.js applications. Usage: const Byteroo = require('byteroo'); const storage = new Byteroo({ name:

JMax 1 Jan 3, 2022
fetch and process data in web worker, store in indexedDB.

Query+ install yarn add query-plus or pnpm add query-plus or npm install query-plus import import { useFetch, usePreFetch } from "query-plus" use

Rod Lewis 5 Aug 29, 2022
A high-resolution local database that uses precise algorithms to easily record data in local files within a project with persistent JSON and YAML support designed to be easy to set up and use

About A high-resolution local database that uses precise algorithms to easily record data in local files within a project with persistent JSON and YML

Shuruhatik 5 Dec 28, 2022
Query for CSS brower support data, combined from caniuse and MDN, including version support started and global support percentages.

css-browser-support Query for CSS browser support data, combined from caniuse and MDN, including version support started and global support percentage

Stephanie Eckles 65 Nov 2, 2022
Tenzi is a dice game. The player needs to roll dice until they are all the same. Clicking on a dice, freezes it at its current value between rolls. Best scores are saved to local storage.

Roll until all dice are the same Try me! Technologies Used Description Tenzi is a dice game used to demonstrate the use of React Hooks (useState, useE

Michael Kolesidis 7 Nov 23, 2022
Bookmate - Watch changes in Chrome bookmarks, and use bookmarks as an append-only key-value store via an fs-like API.

?? Bookmate An append-only key-value store built on Chrome bookmarks, plus an asychronous stream of Bookmark changes. For NodeJS Actual production exa

Cris 6 Nov 8, 2022
A simple in-memory key-value cache for function execution, allowing both sync and async operations using the same methods

A simple in-memory key-value cache for function execution, allowing both sync and async operations using the same methods. It provides an invalidation mechanism based both on exact string and regex.

cadienvan 10 Dec 15, 2022
Resolve parallel promises in key-value pairs whilst maintaining type information

async-kv Resolves promises in key-value pairs maintaining type information. Prerequisites NodeJS 12 or later Installation npm i async-kv yarn add asyn

Tony Tamplin 4 Feb 17, 2022
Enhanced interval features for Node.js, such as promisified interval and human readable time parsing.

Interval-next Interval-next is a package that extends Javascript's built-in setInterval() capabilities. You have a plain and promisified interval meth

Snowy 5 Jul 28, 2022