有没有使用localStorage解决的例子1

使用 `localStorage` 来保存搜索条件是一种常见的跨页面通信方法，特别是在没有服务器支持的情况下。下面是一个简单的例子，展示了如何将搜索条件存入 `localStorage` 并在需要的时候恢复它。

首先，在列表页面（List.js），用户输入搜索词后，我们将其存储到 `localStorage`：

function List() {
  const [searchTerm, setSearchTerm] = useState('');

  function handleSearchChange(event) {
    setSearchTerm(event.target.value);
    localStorage.setItem('searchTerm', searchTerm);
  }

  useEffect(() => {
    // 页面加载时，检查是否有已保存的搜索条件
    const storedSearch = localStorage.getItem('searchTerm');
    if (storedSearch) {
      setSearchTerm(storedSearch);
    }
  }, []);

  // ...其他列表代码，例如渲染搜索结果

  return (
    <input type="text" value={searchTerm} onChange={handleSearchChange} />
    {/* ... */}
  );
}

然后，在详情页面（Detail.js）返回列表时，我们可以清除搜索条件，并查看本地是否还有搜索词存在：

function Detail() {
  // ...细节展示代码

  useEffect(() => {
    localStorage.removeItem('searchTerm'); // 清除当前页面的搜索条件
    // 判断是否有之前保存的搜索条件
    const storedSearch = localStorage.getItem('searchTerm');
    if (storedSearch) {
      // 将搜索条件重新应用到导航栏或前一页面
      window.history.replaceState(null, '', `/list?search=${encodedSearchTerm}`);
    }
  }, []);

  // ...返回按钮的逻辑或其他清理动作

  return (
    <button onClick={() => navigate('back')} /* 使用导航API */>
      返回列表
    </button>
  );
}

在这个例子中，`window.history.replaceState` 被用来替换当前历史记录，保持URL的整洁。如果用户有其他页面依赖于 `localStorage` 存储的状态，记得也要在那些页面上处理这种情况。