Хук useEffect для сохранения в localStorage, когда пользователь закрывает вкладку браузера.

Question

Я пытаюсь сохранить key:value в localStorage, используя «возврат очистки» из useEffect() hook.

Это мой код:

  useEffect(() => {

    const onbeforeunloadFn = () => {
      localStorage.setItem('color', 'red')
    }

    window.addEventListener('onbeforeunload', onbeforeunloadFn);
    return () => {
      window.removeEventListener('onbeforeunload', onbeforeunloadFn);
    }
  }, [])

Я даже попытался использовать поведение по умолчанию от onbeforeunloadFn handler до prevent и вернуть string, но оно также не работает. Вслед за до загрузки документа

Может кто-нибудь объяснить мне, почему или как я могу сделать этот код таким, чтобы он работал просто , когда пользователь закрывает browser tab? Спасибо

Answer 1

Как упомянул @AlexanderStaroselsky, я думаю, вы просто слегка ошиблись в названии события.

useEffect(() => {

    const onbeforeunloadFn = () => {
      localStorage.setItem('color', 'red')
    }

    window.addEventListener('beforeunload', onbeforeunloadFn);
    return () => {
      window.removeEventListener('beforeunload', onbeforeunloadFn);
    }
  }, [])

Интересно, что англоязычная версия документа , на которую вы ссылались , имеет немного другой пример, который, вероятно, помог бы вам определить ошибку:

window.addEventListener("beforeunload", function(event) { ... });
window.onbeforeunload = function(event) { ... };