enhance your browser storage

Usage no npm install needed!

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


BrowserStorageEnhance- enhance your browser storage


Environments in which to use

  • Browser support


We often use localStorage or sessionStorage to store data in browser. And we often use JSON.stringify covert data to string in order to call setItem to store data in browser. When we need data in storage, we use JSON.parse restore our data. But there is a risk in this process. When we call these to store data or get data, the data may be covert to some type else. some like Map, Set, RegExp and so on.

You can use this case in browser console

const map = new Map()

const type = ele =>

console.log(type(map)) // [object Map]

const _map = JSON.parse(JSON.stringify(map))

console.log(type(_map)) // [object Object]

now, type of data has changed.

So. I did this to resolve this problem. I package it to a module in order to call localStorage or sessionStorage more easily, and I did something to enhance it.


Use BrowserStorageEnhance is easily. First, you need import this to your project.

// use in js
import Store from 'browser-storage-enhance'

// use in ts
import * as Store from 'browser-storage-enhance'

And then, enjoy it!

If your data doesn't contain the type that can be destoryed by JSON conversion. You can use default configuration directily

  const { stSet, stGet, stAdd, stDel, stClear, stSize } = Store()
  const stData = {
    num: 12345,
    str: '12345',
    bool: false,
    arr: [1,2,3],
    obj: {
      num: 12345,
      str: '12345',
      bool: false,
      arr: [1,2,3],      
  stSet('test', stData)

If your data contain the type that can be destoryed by JSON conversion. You must use consumer configuration, and you need set isBaseDataType false

  const { stSet, stGet, stAdd, stDel, stClear, stSize } = Store({
    options: {
      isBaseDataType: false,

  const stData = {
    map: new Map([['a','b'], ['c', new Map([['d','e'], ['f', 'g']])]])
    reg: /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/igm,
    set: new Set([1,1,2,2]),
    date: new Date()

  stSet('test', stData)

  // you can print and see the difference between stGet and getItem directly


If your project is complicated, you may don't want to import everywhere and use Store to generate stSet..., you can add a file to your utils, and write something like this

import Store from 'browser-storage-enhance'

const { stSet, stGet, stDel, stClear, stAdd, stSize } = Store()

const { stSet: stSetCache, stGet: stGetCache } = Store({
  options: {
    preKey: 'cache',
    isBaseDataType: false,

export {
  stSet, stGet, stDel, stClear, stAdd, stSize, stSetCache, stGetCache

now, you can use it more easily , isn't ?


Name Type default description
type string local this tell BrowserStorageEnhance which type storage will be use. And another type is session
options object options look next


Name Type default description
creator string show who create this and we can use stClear clear creator data
preKey string key prefix. show the store function
isBaseDataType boolean true if JSON conversion cause data structure destroyed, set this option false
expired number Infinity this data will be clear in some hours later if it is be set
maxSize number you can set this option to control the size your app will used.It's unit is MB.
autoClear boolean false if the data you store over storage size, you can set this option true, and the first storage data will be clear
clearKey string you may want auto clear specific function storage, you can set the option. And it's match the preKey. A storage key like 'Thomas.cache.interface', 'Thomas' is the creator, 'cache' is function. so, you can set clearKey 'cache'

if we set creator 'Thomas', and set preKey 'cache'. The storage key will be auto add 'Thomas.cache' prefix. When we call stSet('interface', data) to store data, in fact, the storage key is 'Thomas.cache.interface'. So,in the future, we know who and why create this storage data according to the key.


  • stSet(key, value)
  • stGet(key)
  • stAdd(key, value) add or create
  • stDel(key)
  • stClear(prefix?) clear all or specific storage。prefix is a RegExp and it's match the storage key
  • stSize() view the size you has used


  • if JSON conversion cause your data structure destroyed, set isBaseDataType option false.
  • Attention memory size. Different Browser have different memory size. When you add data exceed it's size. your data will not be added.You can call stSize to view the size you had used.