如何添加本地存储以在 Gatsby 中保留暗模式主题

Posted 2023-02-22

【中文标题】如何添加本地存储以在 Gatsby 中保留暗模式主题

【英文标题】：How to add local storage to persist dark mode theme in Gatsby

【发布时间】：2020-11-28 22:14:31

【问题描述】：

我已经尝试了所有方法来添加本地存储以保持主题。关于如何使用现有代码实现的任何想法？在第一次渲染时，我得到了各种相互冲突的主题。我尝试在设置主题时实现本地存储。

const setTheme = type => 
  localStorage.setItem("theme", setState( ...state, theme: type === "dark" ? theme.light : theme.dark )

    
const initState = 
  theme: localStorage.getItem("theme"),
  setTheme: setTheme,

    
const [state, setState] = useState(initState)

ThemeProvider.js

    
export const ThemeContext = React.createContext(
      theme: 
      
      ,
      setTheme: () => ,
    )
    
export const ThemeContextProvider = props => 
      const theme = 
        light: 
          
        ,
        dark: 
         
        ,
      
    
      const setTheme = type => 
        setState( ...state, theme: type === "dark" ? theme.light : theme.dark )
      
    
      const initState = 
        theme: theme.light,
        setTheme: setTheme,
      
    
      const [state, setState] = useState(initState)
    
      return (
        <ThemeContext.Provider value=state>
          props.children
        </ThemeContext.Provider>
      )
     

【参考方案1】：

这行对我来说没有意义：

const setTheme = type => 
  localStorage.setItem("theme", setState( ...state, theme: type === "dark" ? theme.light : theme.dark )

您想在 localstorage 中设置项目，但您在 setItem 函数中设置 React 状态？

需要注意的两点：

不要在 localStorage.setItem 函数中设置 React 状态 您只能将字符串化的值保存在 localStorage 中。如果不将 javascript 对象转换为 json 字符串，则无法保存它。

这是正确的：

const setTheme = type => 
  localStorage.setItem("theme", state.theme ); // only save the theme value "dark" or "light" as a string

您需要根据localStorage或initialState中的值触发设置状态。为此使用useffect。这个answer 告诉你怎么做。