React应用中仅用localStorage实现Banner显示隐藏（无需状态）

我希望隐藏Banner时不再使用React状态，仅通过localStorage控制其显示与隐藏。已编写如下onClick处理函数：

const handleClick = () => {
  const data = false;
  localStorage.setItem('show-banner', data);
};

并将其传入Banner组件的关闭按钮：

<MyBanner onClick={handleClick} />

请问如何默认显示Banner，执行handleClick后隐藏它（仅用localStorage的setItem和getItem，不使用React状态）？

• 修正localStorage存储格式
  localStorage仅支持存储字符串，直接存入布尔值会被自动转为字符串"false"，后续判断容易出错，先把存储逻辑改成字符串格式：

const handleClick = () => {
  localStorage.setItem('show-banner', 'false');
};

• 渲染时通过localStorage判断显示状态
  默认情况下，若localStorage中不存在show-banner键，就显示Banner；如果存在且值为"false"则隐藏。直接在渲染阶段做判断：

{localStorage.getItem('show-banner') !== 'false' && <MyBanner onClick={handleClick} />}

• 处理点击后的即时隐藏
  由于修改localStorage不会触发React组件重渲染，点击关闭按钮后页面不会自动更新。可以选择两种方式解决：
  1. 手动刷新页面：

  const handleClick = () => {
    localStorage.setItem('show-banner', 'false');
    window.location.reload();
  };
  

  2. 直接操作DOM隐藏Banner（无需刷新）：

  const handleClick = () => {
    localStorage.setItem('show-banner', 'false');
    // 替换成你Banner组件对应的DOM选择器
    document.querySelector('.my-banner')?.style.display = 'none';
  };
  

内容的提问来源于stack exchange，提问作者meez