LocalStorage для React Экран входа в систему с reCaptcha

Привет всем, я пытаюсь использовать localStorage, когда пользователь пытается войти в мой веб-сайт, если он / она пытается более 2 раз, ReCaptcha появляется только так, это установить флажок в reCaptcha, но если пользователь обновил страницу, reCaptcha пропал из-за моего состояния попытки Number. Я хочу сохранить попытку Number в localStorage и использовать в первую очередь localStorage, если пользователь пытается более 2, при обновлении страницы reCaptche должен быть там.

Я пытался так, но это не работает. Если вы мне поможете, я буду очень признателен за это. Всем спасибо.

 this.state = {
      email: '',
      password: '',
      load: false,
      attempCount: 0,
    };

 handleLogin(e) {
    const {
      email, password, recaptcha,
    } = this.state;

    const cachedHits = localStorage.getItem(this.state.attempCount);

    if (cachedHits) {
      this.setState({ attempCount: JSON.parse(cachedHits) });
      return;
    }
    this.setState({ attempCount: this.state.attempCount + 1 });
    e.preventDefault();
    e.stopPropagation();
    this.props.doSignIn({ email, password, recaptcha });
    return false;
  }
Источник

3 ответа

Решение

Хорошо, код, который вы добавили, не показывает, как и где вы устанавливаете значение в localStorage.

Я полагаю, вы будете обновлять localstorage в событии нажатия кнопки входа в систему что-то вроде этого

localStorage.setItem('clickCount', this.state.attempCount );

при условии вашего this.state.attempCount увеличивается на 1 при клике

Теперь, чтобы получить его значение, используйте

let count = localStorage.getItem('clickCount');

if(count > 2){
  // show Captcha
}
Источник

Я думаю, вы пытаетесь получить значение под ключ 0 если вы посмотрите на документацию здесь. Попробуй сохранить его под ключ ты сейчас как localStorage.setItem('attempts', this.state.attempCount) а потом localStorage.getItem('attempts'),

Когда вы делаете getItem Я верю, что это вернет stringтак же разбирать parseInt(localStorage.getItem('attempts'), 10) перед использованием его для любой операции.

Есть две проблемы с кодом:

  1. значение никогда не будет установлено в локальном хранилище.

  2. В первый раз, когда вызывается handleLogin, ниже строки const cachedHits = localStorage.getItem(0); он пытается извлечь значение для нуля, который никогда не сохраняется в локальном хранилище, и возвращает ноль (т. е. cachedHits= null), затем пропускает часть if, устанавливает значение элемента tryCount в 1 и отображает капчу. в следующий раз, когда вызывается handleLogin, const cachedHits = localStorage.getItem(1); который снова отсутствует в кэше и cachedHits = null и т. д. Итак, вам нужно установить значение в localStorage для некоторого ключа, например, и в getItem использовать этот ключ

Источник

Не видя ваш код doSignIn, трудно сказать, что происходит с вашим localStorage, но ваш вызов localStorage в вставленном вами коде передает ваш попытку Count в качестве ключа. Вы должны использовать строку в качестве ключа, например "tryupount", а не ключ, который будет меняться при изменении вашего состояния.

Возможно, это не вся ваша проблема, но это то, что я заметил до сих пор.

Источник
Другие вопросы по тегам