使用react将信息放入localStorage

Question

我正在为一个酒类品牌开发一个展示网站，我希望在该网站初始化时，为用户第一次访问显示一个组件（我已经创建的模式），但在后续访问时不显示。

我的组件（legalAge）是一个模态，目的是询问用户是否是专业的^^

我的组件

我想把它有条件地放在哪里

因此，我想在本地存储中以布尔值的形式创建一个变量，但我真的不知道如何去做。

我的意思是我知道在本地存储中创建信息，但我不知道如何使用它......

我知道这种做法在安全性方面不太可靠，但我暂时会忍受

Answer 1

这是我的做法。

首次渲染组件时，在本地存储中查找您的年龄键。如果找到设置它。

然后，每当年龄发生变化时，使用效果都会使您的本地存储保持同步。

  const LOCAL_STORAGE_KEY_AGE = 'age';

  const [age, setAge] = useState(() => {
    const storedAge = localStorage.getItem(LOCAL_STORAGE_KEY_AGE);
    return storedAge !== null ? JSON.parse(storedAge) : false;
  });

  useEffect(() => {
    localStorage.setItem(LOCAL_STORAGE_KEY_AGE, JSON.stringify(storedAge));
  }, [storedAge]);