localStorage.getItem / .setItem 是异步的？

Question

我最近开始使用 React，想做一个登录逻辑。苦苦挣扎了一段时间，终于偶然发现了localStorage。我尝试做的是在从 api 获取用户凭据后，将它们存储在 localStorage 中，以便根据用户授权进行页面重定向。

问题是 localStorage 似乎是异步的。我在 if 和 if 首先执行之前调用 localStorage，基于 localStorage 中的 prev 数据。

SignIn.js

 let permission_type;
                    switch (res.data.permission){
                        case 1:
                            permission_type='supervisor';
                            break;
                        case 2:
                            permission_type='basicuser';
                            break;
                        case 3:
                            permission_type='qualitychecker';
                            break;
                        default:
                            permission_type='guest';
                            break;

                    }
                    let newUserData={id: userData.id,
                                auth: permission_type}

                    localStorage.setItem("signed-in-user", JSON.stringify(newUserData));
                    history.push(`/${permission_type}`);

//

Home.js

const Home = () => {

const [user, setUser] = useState({});
const history = useHistory();

useEffect(() => {
    const us = JSON.parse(localStorage.getItem('signed-in-user'));
    setUser(us);
});

const signOut = () => {
    const signOutUser = {id: -1,
                        auth: 'guest'}
    localStorage.setItem('signed-in-user',JSON.stringify(signOutUser));
    localStorage.clear();
    history.push('/');
}

const classes = useStyles();
console.log(user.auth)
if (user.auth == 'basicuser') {return (
  <div>
    <AppBar position="static">
      <Toolbar>
        <IconButton edge="start"
                    className={classes.menuButton}
                    color="inherit"
                    aria-label="menu">
            <MenuIcon />
        </IconButton>
        <Typography variant="h6"
                    className={classes.title}>
            News
        </Typography>
        <Button color="inherit"
                onClick={signOut}>SIGN OUT</Button>
      </Toolbar>
    </AppBar>
  </div>
);}
else {
  return (<Redirect to='/' />);
}

};

Answer 1

localstorage functions are sync。你说的必须是“线程安全的”。 localstorage 不是线程安全的。如果需要，需要一些东西来锁定数据。

localStorage.getItem / .setItem 是异步的？

localStorage.getItem / .setItem is async?

reactjs

asynchronous

local-storage

synchronous