Как сделать так, чтобы localStorage не сбрасывался при визуализации приложения?

Question

Я создал localStorage, который добавляет +1 каждый раз, когда пользователь посещает мое приложение. Проблема в том, что каждый раз, когда я обновляю sh страницу, значение возвращается к 0.

Это мой код:

  localStorage.setItem('timesVisited', 0);

  useEffect(() => {
      if (localStorage.getItem('timesVisited') < 5) {
      let timesVisited = parseInt(localStorage.getItem('timesVisited'));
      localStorage.setItem('timesVisited', ++timesVisited);
    }
},[])

Идея состоит в том, чтобы сделать сумму localStorage + 1 до 5, но до 0. Что я делаю не так?

Answer 1

Попробуйте что-то вроде этого, если локальное хранилище не установлено, тогда установите 0, иначе приращение

 useEffect(() => {
   if (!localStorage.getItem('timesVisited')) {
     localStorage.setItem('timesVisited', 0);
   } else if (localStorage.getItem('timesVisited') < 5) {
     let timesVisited = parseInt(localStorage.getItem('timesVisited'));
     localStorage.setItem('timesVisited', ++timesVisited);
   }
 }, [])

Answer 2

Если строки, указанные вами в теле компонента, будут вызываться не только каждый раз, когда пользователь посещает ваше приложение, но и каждый раз, когда компонент выполняет рендеринг.

Для поведения, которое вы ищете, Вы должны загрузить значение и установить его в 0, если оно не существует. Это следует делать и за пределами вашего компонента.

Также обратите внимание, что localStorage хранит только строки, поэтому вам нужно будет проанализировать то, что вы извлекаете из него.

    const storedValue = localStorage.getItem('timesVisited')
    // localStorage only stores string
    const visitsCount = storedValue ? parseInt(storedValue) : 0

    function myComponent = () => {
        useEffect(() => {
            if(visitsCount >= 5){ 
                return
            }
            localStorage.setItem('timesVisited', ++visitsCount);
        }, [])
    } 

Answer 3

Эта строка всегда запускается и сбрасывает любое предыдущее значение

localStorage.setItem('timesVisited', 0);

, превращая его в

if(!localStorage.getItem('timesVisited')){
  localStorage.setItem('timesVisited', 0)
}