localStorage/sessionStorage wrapper for convenient access.

Usage no npm install needed!

<script type="module">
  import browserConfig from '';


Browser config

You can use localStorage or sessionStorage. But is this convenient and performed like accessing property from an object ? No it's not.

It cache the data locally to reduce number of queries to the actual storage and serialize / de-serialize only if needed.



yarn add browser-config

Importing the library

import Store from "browser-config";
const store = new Store();

Saving person to localStorage

store.person = {
    firstName: "John",
    lastName: "Doe",
    age: 22

This will save the person in cache only, serialization and store into localStorage will happen in next event cycle. So even if we save same property multiple times it will touch the localStorage only once.

Getting person

    firstName: "John",
    lastName: "Doe",
    age: 22

if the person is present in the cache, it will return from cache, otherwise it will query localStorage, deserialize, save into cache and return person.

Getting all keys


Store.keys() will return generator, need to spread to use as an array

Getting all values

    person: {
        firstName: "John",
        lastName: "Doe",
        age: 22




delete store.person


store.person = undefined;

Clear everything

// can support any serializable data
store.users = [{ name: 'Hello' }]
store.users // [{ name: 'Hello' }]

// mutation is not supported
store.users.push({name: 'New User'}); // x will not work
// adding new value to array
store.users = [ ...config.users, { name: 'New User'}]

Multiple instances

const config1 = new Store('abcd'); // id
const config2 = new Store('dcba'); // id = 'Something' = 'Something else' // Something // Something else

Iterate through all the data

const config = new Store('default') = 'Something' = ''
for (const [ key, value ] of config) {
    console.log({ key, value }) // { key: 'email', value: 'Something' } and so on...

Session storage

By default it will save to localStorage and it is permanent, you can save it sessionStorage as well.

const config = new Store(undefined, {
   validity: "session"
}); = "Hello" // will be saved till browser closed.

Typescript users

interface IPerson {
    name?: string;
    age?: number

const person = Store.create<IPerson>();
person.age = 'hello' // error
person.age = 20 // pass

Custom driver

Sometimes you need to save data to other than localStorage, sessionStorage let's say in cookies.

import Store, { IDriver } from "browser-config";
class Driver implements IDriver {

    set(key: string, val: string) {
        // sourced from
        document.cookie = `${key}=${val}`;
        return this;

    get(key: string) {
        // sourced from
        let name = key + "=";
        let decodedCookie = decodeURIComponent(document.cookie);
        let ca = decodedCookie.split(';');
        for(let i = 0; i <ca.length; i++) {
            let c = ca[i];
            while (c.charAt(0) == ' ') {
            c = c.substring(1);
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);

    remove(key: string) {
        // sourced from
        document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
        return this;

    keys() {
        // need to be implemented

const storage = new Store("1", { driver: new Driver() }); = 'hello';


const store = new Store(); = "hello" = "";

JSON.stringify(store) // {"name": "hello", "email": ""}
store.toJSON = "Something else";
// toJSON is a built-in method and it is only method/property built-in it doesn't mean you can't store this as a property.
// you can still use but there is a slightly different approach for accessing the value
// if using typescript use can see type error

store.toJSON // [Function toJSON]
store.toJSON().toJSON // 'Something else'



import Store from "browser-config";
const store = new Store(id, option)
  • id?: string unique for unique storage
  • option?
    • validity: "session" | "permanent" validity of the data for particular storage, default is permanent.
    • driver: IDriver custom driver

static methods

  • Store): string generated or passed id
  • Store.keys(store: Store): Iterable<string> get all the keys
  • Store.values(store: Store): {[key: string]: any} get all the values
  • Store.clear(store: Store): string clearing all the values
  • Store.update(store: Store, data: object) update values in bulk
  • Store.set(store: Store, data: object) it will delete all the existing value and set the provided object
  • Store.clearCache(store: Store) it will delete cache
  • Store.savePending(store: Store) force to save now into the storage instead of waiting for next event cycle.