Localstorage无法正常工作

Question

我在我的React.js应用程序中添加注册和登录但我无法理解为什么如果我登录然后检查我的浏览器控制台（应用程序选项卡）我看不到任何项目本地存储。

这里是我的代码的相关部分：

在signin.js内部组件 :(当我点击登录表单上的提交按钮时，我会触发此功能）

handleFormSubmit({ email, password }) {
        this.props.signinUser({ email, password });
}

我的操作：

export function signinUser({ email, password }) {
  return function(dispatch) {
    axios.post('http://localhost:3001/users/signin', { email, password }).then(response => {
        if (response.data.username){
          dispatch({ type: AUTH_USER, payload:response.data }); // If request is good update state to indicate user is authenticated
          localStorage.setItem('token', response.data.token); // - Save the JWT token
          browserHistory.push('/');
        }
      }).catch(() => {dispatch(authError('Bad Login Info'));});
  }
}

我是否必须在我的应用程序中的某处导入LocalStorage？

Answer 1

正如您所说，response.data.token未定义，因此无法存储在localStorage中。

但是对于您的用例

myToken = [{token:"token here"}]
localStorage.setItem('token', JSON.stringify(myToken));
console.log(JSON.parse(localStorage.getItem('token'))[0].token);

作品

在开发者控制台中查看

按F12，然后在“应用程序”选项卡的左侧菜单中展开localstorage以查看您的域，然后单击它，您应该能够看到您的localstorage项目，否则您将无法通过{ {1}}。