Как приметить изменении без перезагрузки страницы при изменении localstorage?

Question

[LoveCodeandCoffe]

Разрабатываю SPA. Есть экран настроек в котором выбирается язык Ru или Eng. При нажатии на соответствующий флаг меняется значение ключа в localstorage. Затем экспортируемой переменной MODE присваивается значение ключа из localstorage. И это все хорошо работает только если перезагружать страницу. Как заставить( мб подписаться на изменение localstorage) обновляться переменную MODE каждый раз как меняется значение кюча в localstorage?

код контроллера

import setHendler from './../hendlers/hendler.component'


let MODE = "RU"


export const getLAng = (elements) => {

  const reducer = (e) => {
    e = event.target
    switch (e.id){
      case 'RU' :
        localStorage.setItem('lang', "RU")
        MODE = localStorage.getItem('lang')
  
        break
      case 'ENG':
        localStorage.setItem('lang', "ENG")
        MODE = localStorage.getItem('lang')
        break
  
      case 'OK':
        break
    } 
    
    return MODE
    
  
  }
    

  elements.forEach(element => {
    setHendler(element, 'click', false, reducer)
  }) 
  console.log(MODE)
  }



  
  
  


// if(localStorage.getItem('lang') !== undefined || null){
//   LANG = localStorage.getItem('lang')
// }




  // if(LANG !== null || undefined){
  //   MODE = LANG
  // }



  MODE = localStorage.getItem('lang')
 export default  MODE

событие window storage тут не подходит . т.к отлавливает изменения только на других вкладках

Answer 1

[dmestroone]

Можно завести сервисную функцию для работы с localStorage, которая будет использоваться для редактирования localStorage. При изменении localStorage кидать CustomEvent c ключом измененной проперти. Потом подписаться на этот ивент и в подписке ждать изменения нужного ключа, в Вашем случае lang.

Answer 2

[EVG]

Вам следует поменять архитектуру хранения, состояния, тем более что создаете SPA. Вам следует создать простой объект, в свойствах которого будет храниться состояние приложения, в частности, у него может быть свойство mode. Далее, для изменения этого свойства создать функцию-редьюсер. После этого, все вместе упаковать в хранилище/стор. Что же до персистент-хранения в локал-сторадже или где там еще, то хранилище должно предоставлять метод dispatch(), в который можно передать функцию, которая будет при изменениях будет скидывать состояние в нужный сторадж. Также, с помощью этого же метода добавлять функции обновления состояние DOM или что там нужно для отображения в UI.

В общем, я кратко описал концепцию работы REDUX, новичкам в этом вопросе кажется, что эта библиотека создана исключительно для реакта, но это не так.

И да, данные сначала меняются в "горячем" объекте внутри стора, а потом уже выталкиваются в UI и персистент-хранилища.