BrowserStorageEnhance- enhance your browser storage

English|中文

Environments in which to use

• Browser support

Why

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 => Object.prototype.toString.call(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.

How

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
  console.log(stGet('test'))

  console.log(JSON.parse(localStorage.getItem('test')).value)

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 ?

props

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

options

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.

function

• 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

WARM

• 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.