Можно ли следить за LocalStorage?

Question

[Александр]

Здравствуйте! Есть 2 вкладки (одна и та же страница). На одной вкладке я изменяю значение ключа name в localStorage. Можно ли как-то на второй вкладке отловить это изменение (Computed, Watch)?

Answer 1

[Eugene Chefranov]

created() {
    window.addEventListener('storage', () => {
      //что-то делаем когда меняется local storage
    })
  },

Comments

[Александр]

Использую Nuxt, в created нет window, есть иные пути?

[Eugene Chefranov]

Александр,

created () {
    if (process.browser) { 
        window.addEventListener('storage', () => {
      //что-то делаем когда меняется local storage
    })
    }
},

[Александр]

created() {
      if (process.browser) {
        window.addEventListener('storage', this.test)
      }
    }
    // methods
    test() {
      console.log(123)
    },

Почему-то нет реакции даже на самой вкладке, на которой я изменяю localStorage:

setLocalStorage() {
      localStorage.name += this.index
    }

[Eugene Chefranov]

Александр, метод же в секции methods, код выше просто упростили? Можете тут посмотреть примеры прослушивания изменения local storage https://developer.mozilla.org/ru/docs/Web/API/Web_...

[Александр]

Структура компонента следующая:

<template lang="pug">
  button(@click="setLocalStorage()")
</template>

export default {
  data() {
    return {
      index: 0
    }
  },
  methods: {
    test() {
      console.log(1)
    },
    setLocalStorage() {
      localStorage.name += this.index
    }
  },
   created() {
    if (process.browser) {
      window.addEventListener('storage', this.test)
    }
  }
}

Не могу понять, почему не вешается обработчик при помощи addEventListener

[Eugene Chefranov]

Александр, ответ на ваш вопрос:

Он вешается, но срабатывает если меняется в соседней вкладке или окне, если меняется в той же самой вкладке/окне, то не срабоатет

[Александр]

Eugene Chefranov, Я это прочёл и мониторил на другой вкладке, возможно где-то у меня банальная ошибка

[Артур Карапетян]

Александр, перенесите из created в mounted