Exciting news!Announcing our $4.6M Series Seed. Learn more
Log in


Package Overview
File Explorer

Advanced tools


localStorage/sessionStorage wrapper for convenient access.


Version published
Yearly downloads
increased by817.51%

Weekly downloads



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

console.log(store.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

console.log([...Store.keys(store)]); [ "person" ]

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

Getting all values

console.log(Object.fromEntries(store)); { person: { firstName: "John", lastName: "Doe", age: 22 } }




delete store.person


store.person = undefined;

Clear everything

Store.clear(store); // 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 config1.name = 'Something' config2.name = 'Something else' config1.name // Something config2.name // Something else

Iterate through all the data

const config = new Store('default') config.name = 'Something' config.email = '[email protected]' 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" }); config.name = "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 https://www.w3schools.com/js/js_cookies.asp document.cookie = `${key}=${val}`; return this; } get(key: string) { // sourced from https://www.w3schools.com/js/js_cookies.asp 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 https://www.w3schools.com/js/js_cookies.asp 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() }); storage.data = 'hello'; expect(storage.data).toBe('hello');


const store = new Store(); store.name = "hello" store.email = "[email protected]"; JSON.stringify(store) // {"name": "hello", "email": "[email protected]"} 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.id(store: 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.




Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc