我使用上下文API创建了一个计数器，我需要它来维护页面更改后的当前状态。是否有任何方法可以在会话存储之类的页面更改中保留计数器值？我正在使用react router更改页面。

export const CounterContext = React.createContext()



function App() {

  const [Counter, setCounter] = useState(0)
  useEffect(() => {
    setCounter(JSON.parse(window.localStorage.getItem('count')));
  }, []);

  useEffect(() => {
    window.localStorage.setItem('count', Counter);
  }, [Counter]);
  
  function ChangeCounter() {
    setCounter(Counter+1);
  }
  console.log(Counter);

  return (
    <CounterContext.Provider value={{Counter, ChangeCounter}}>
    <Router>
    <div className="App">
      <header className="App-header">
        <Navbar />
      </header>
      <div className="Content">
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/Products">
            <Products />
          </Route>
          <Route path="/Contact">
            <Contact />
          </Route>        
        
        </Switch>
      </div>
      
      <footer>
        <Footer />
      </footer>
    </div>
    </Router>
    </CounterContext.Provider>
  );
}

编辑： 我用本地存储做的，但我不确定我想要的是什么。现在，即使在浏览器上，重新启动计数器，保持相同的更新值，但我希望它刷新。现在有办法做到吗？

---

顺晟科技：

您可以使用cookie来实现此功能。 您可以选择universal-cookie来操作react中的cookie

export const CounterContext = React.createContext()



function App() {

  const [Counter, setCounter] = useState(0)
  useEffect(() => {
    setCounter(JSON.parse(window.localStorage.getItem('count')));
  }, []);

  useEffect(() => {
    window.localStorage.setItem('count', Counter);
  }, [Counter]);
  
  function ChangeCounter() {
    setCounter(Counter+1);
  }
  console.log(Counter);

  return (
    <CounterContext.Provider value={{Counter, ChangeCounter}}>
    <Router>
    <div className="App">
      <header className="App-header">
        <Navbar />
      </header>
      <div className="Content">
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/Products">
            <Products />
          </Route>
          <Route path="/Contact">
            <Contact />
          </Route>        
        
        </Switch>
      </div>
      
      <footer>
        <Footer />
      </footer>
    </div>
    </Router>
    </CounterContext.Provider>
  );
}

好的，我成功了。非常感谢大家！我只在会话期间使用sessionStorage来保存数据。它看起来像这样:

export const CounterContext = React.createContext()



function App() {

  const [Counter, setCounter] = useState(0)
  useEffect(() => {
    setCounter(JSON.parse(window.localStorage.getItem('count')));
  }, []);

  useEffect(() => {
    window.localStorage.setItem('count', Counter);
  }, [Counter]);
  
  function ChangeCounter() {
    setCounter(Counter+1);
  }
  console.log(Counter);

  return (
    <CounterContext.Provider value={{Counter, ChangeCounter}}>
    <Router>
    <div className="App">
      <header className="App-header">
        <Navbar />
      </header>
      <div className="Content">
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/Products">
            <Products />
          </Route>
          <Route path="/Contact">
            <Contact />
          </Route>        
        
        </Switch>
      </div>
      
      <footer>
        <Footer />
      </footer>
    </div>
    </Router>
    </CounterContext.Provider>
  );
}