Question

大家好，如果用户尝试两次以上登录reCaptcha，我尝试使用localStorage的唯一方法是单击reCaptcha中的复选框，但如果用户刷新页面reCaptcha，则因为我的状态为attempNumber而消失了。我想将attempNumber保留在localStorage中，如果用户尝试2次以上，则首先使用localStorage，刷新页面时，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;
  }

Answer 1

在没有看到doSignIn代码的情况下，很难说出localStorage发生了什么，但是在您粘贴的代码中对localStorage的调用正在将tryCount作为密钥传递。您应该使用字符串作为键，例如“ attemptCount”，而不要使用随状态变化而改变的键。

这可能不是您的全部问题，但这是我到目前为止所注意到的。

Answer 2

如果您看一下文档here，我想您正在尝试获取键0下的值。尝试将其保存在您现在使用的密钥下，依次为localStorage.setItem('attempts', this.state.attempCount)和localStorage.getItem('attempts')。

当您执行getItem时，我相信它会返回string，因此在将其用于任何操作之前，请先进行解析parseInt(localStorage.getItem('attempts'), 10)。

代码有两个问题：

值永远不会在本地存储中设置。
第一次调用handleLogin时，在行下方 const cachedHits = localStorage.getItem（0）; 它尝试获取从未存储在本地存储中的零值，并返回null（即cachedHits = null），然后它会跳过if部分，并将attempCount的状态设置为1并显示验证码。下次调用handleLogin时， const cachedHits = localStorage.getItem（1）;再次不在cache和cachedHits = null中出现，依此类推... 因此，您需要针对某些键（例如，在getStorage中使用该键）在localStorage中设置值

Answer 3

好吧，您添加的代码不会显示在localStorage中设置值的方式和位置。

我假设您将在登录按钮点击事件中更新localstorage

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

假设您的this.state.attempCount在点击时增加了1

现在要使用

来获取其价值

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

if(count > 2){
  // show Captcha
}

带有reCaptcha的React登录屏幕的LocalStorage

3 个答案: