farskid / localstorage-watcher

A watcher for localStorage changes

LocalStorage watcher

Watch changes in browser localStorage

Installation

Simply run npm install localstorage-watcher --save or clone the repository.

Usage

The whole system works on storageWatcher global variable.

Methods and Properties

• settings private property, an object that holds default settings. Default settings are:
  1. duration defaults to 1500ms or 1.5 seconds
  2. logType defaults to "info" which logger will use to run console.info. Other options are error, log, table, warn
  3. verbose defaults to true that will allow logger to log changes, difference of storageWatcher.lastStorage and window.localStorage. To turn logger off, change this to false
• configure public method, this method configures settings.
• start public method, starts the watcher
• stop public method, stops the watcher
• lastStorage public property, holds last storage object before recent change

Using methods

  var watcher = storageWatcher;

  // Configure watcher
  watcher.configure({
  	verbose: true, // (Bool) Default: true
  	duration: 3000, // (Integer) Default: 1500
  	logType: 'warn' // (String) Default: 'info'
  })

  // Start watcher
  watcher.start();

  // add to storage to see the watcher's behavior
  localStorage.setItem('testKey', 'testValue');

  // on next watch cycle, the watcher will log the change and the difference of watcher.lastStorage and window.localStorage

  // Stop watcher
  watcher.stop()

  // Get the last saved storage
  watcher.lastStorage

Example

In the example folder, open index.html in browser and you will see a logger system similar to your browser console and bunch of useful buttons.

localstorage-watcher's Issues

v2 RFC

window.localStorage.clear()

function getEntries(obj) {
  return Object.entries(obj);
}

const toHashMap = entries => entries.reduce((t, c) => {
  return {
    ...t,
    [c[0]]: c[1]
  }
}, {});

const hash = obj => encode(JSON.stringify(obj))

const encode = btoa;
const decode = atob;

function storageWatcher(duration = 1000, onChange = () => {}) {
  let lastHash = hash(window.localStorage),
    id;

  const hasChanged = () => hash(window.localStorage) !== lastHash;


  const check = () => {
    if (hasChanged()) {
      const entries = getEntries(window.localStorage);
      const hashMap = toHashMap(entries)
      lastHash = hash(window.localStorage);
      onChange(hashMap)
    }
  }

  return {
    start() {
      console.log('started')
      id = setInterval(check, duration);
    },
    stop() {
      console.log('stopped')
      clearInterval(id);
    }
  }
}


let w = storageWatcher(1000, storage => {
  console.log(`local storage changed`, storage)
});

w.start()



window.localStorage.setItem('a', 1);

setTimeout(() => window.localStorage.setItem('b', 2), 500);

setTimeout(() => window.localStorage.setItem('c', 3), 1500);

setTimeout(() => window.localStorage.removeItem('b'), 2500);

setTimeout(() => {
  window.localStorage.removeItem('a')
  window.localStorage.removeItem('c')

  window.localStorage.setItem('c', 3)
  window.localStorage.setItem('a', 1);

}, 1500);