Блог

Я использую пакет npm «storage-changed», который обнаруживает изменения localStorage на той же вкладке («https://www.npmjs.com/package/storage-changed «), теперь он отлично работает в Chrome и способен правильно определять события.Однако это не работает в firefox или Microsoft edge.

Как я могу заставить его работать в этих браузерах?

Вот код для функции пакета npm

 import storageUtils from 'storage-utilities'

const emit = (target, detail, options) => {
  return new Promise(() => {
    let attempts = 0

    const interval = setInterval(() => {
      if (attempts   >= options.timeout) clearInterval(interval)

      const event = new CustomEvent(options.eventName, { detail })

      if (target[detail.key] === detail.value) {
        window.dispatchEvent(event)
        clearInterval(interval)
      }
    }, 10)
  })
}

const getEventName = (options) => {
  return options.eventName || options.targetName   'StorageChanged'
}

const getTimeout = (options) => {
  return options.timeout ? options.timeout / 10 : 15
}

const getTarget = (storage) => {
  if (typeof storage === 'string') {
    return window[`${storage}Storage`]
  }

  return storage
}

const getTargetName = (storage) => {
  return typeof storage === 'string'
    ? storage === 'session'
      ? 'session'
      : `local`
    : storage === window.sessionStorage
      ? 'session'
      : 'local'
}

export default (storage, options) => {
  const opts = options || {}
  // Set up missing options.
  opts.targetName = getTargetName(storage)
  opts.eventName = getEventName(opts)
  opts.timeout = getTimeout(opts)

  // Get correct storage target and ref setItem.
  const target = getTarget(storage)
  const setItem = target.setItem.bind(target)
  const removeItem = target.removeItem.bind(target)

  target.setItem = (key, value) => {
    const _value = storageUtils.stringify(value)

    emit(target, { key, value: _value, _target: opts.targetName }, opts)
    setItem(key, _value)
  }

  target.removeItem = (key) => {
    emit(target, { key, _target: opts.targetName }, opts)
    removeItem(key)
  }
}
 

Интерфейс localDataStorage (удобная оболочка для HTML5 localStorage API) удобно запускает события изменения на той же странице / вкладке / окне, в котором произошло событие хранения. Отказ от ответственности: я являюсь автором интерфейса. Он работает в FireFox и во всех браузерах Chromium blink (Chrome, Edge, Vivaldi, Brave и др.)

Как только вы установите localDataStorage, этот пример кода позволит вам увидеть эти события изменения:

 function nowICanSeeLocalStorageChangeEvents( e ) {
    console.log(
        "subscriber: "      e.currentTarget.nodeName   "n"  
        "timestamp: "       e.detail.timestamp   " ("   new Date( e.detail.timestamp )   ")"   "n"  
        "prefix: "          e.detail.prefix      "n"  
        "message: "         e.detail.message     "n"  
        "method: "          e.detail.method      "n"  
        "key: "             e.detail.key         "n"  
        "old value: "       e.detail.oldval      "n"  
        "new value: "       e.detail.newval      "n"  
        "old data type: "   e.detail.oldtype     "n"  
        "new data type: "   e.detail.newtype
    );
};
document.addEventListener(
    "localDataStorage"
    , nowICanSeeLocalStorageChangeEvents
    , false
);