如何在NextJs中将主题持久化为localStorage？
如何在NextJs中将主题持久化为localStorage？
提问于 2022-03-04 10:54:51
我的主题存储在一个默认为false的有状态函数中。然后，我传递了一个onclick函数，在false和true之间切换。我希望将其存储在本地存储中，并在刷新时保持不变。但我不能以初始值的形式访问nextJS中的本地存储。
const [dark, setDark] = useState(false);
useEffect(() => {
localStorage.setItem("theme", JSON.stringify(dark));
}, [dark]);
useEffect(() => {
const theme = JSON.parse(localStorage.getItem("theme"));
if (theme) {
setDark(theme);
}
}, []);
function setTheme() {
setDark(!dark);
}回答 3
Stack Overflow用户
发布于 2022-05-07 14:39:14
您可以在useEffect钩子中的下一个js中使用本地存储，因为它只在客户端被调用。
因此，本地存储可以在useEffect中访问。
我个人不使用库来完成这个任务。这是你怎么做的。
- 处理程序切换主题。
- 处理程序用于在应用程序组件挂载或主题更改时从localStorage检查主题。
在主题按钮的Navbar组件中使用themeToggler处理程序。
_app.js
export default function App({Component, pageProps}){
const [darkMode, setDarkMode] = useState(false);
// check and reset theme when `darkMode` changes
useEffect(() => {
themeCheck();
}, [darkMode]);
// check theme on component mount
useEffect(() => {
themeCheck();
}, []);
// check and reset theme
const themeCheck = () => {
if (
localStorage.theme === "dark" ||
(!("theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
document.documentElement.classList.add("dark");
setDarkMode(true);
} else {
document.documentElement.classList.remove("dark");
setDarkMode(false);
}
}
return (
<>
<Navbar darkMode={darkMode} setDarkMode={setDarkMode}/>
<Component {...pageProps} />
</>
);Navbar.js
export default function Navbar({ darkMode, setDarkMode }) {
// called when theme button is pressed
const toggleTheme = () => {
const theme = localStorage.getItem("theme");
if (theme) {
localStorage.setItem("theme", theme === "dark" ? "light" : "dark");
} else {
localStorage.setItem("theme", "dark");
}
setDarkMode(!darkMode);
};
return (
<>
<button id="themeBtn" onClick={toggleTheme}>
Change theme
</button>
</>
);
}Stack Overflow用户
发布于 2022-03-05 03:18:30
有非常著名的图书馆将帮助做这与redux。
https://www.npmjs.com/package/redux-persist
你可以简单的把你的主题传递给redux redux持久化白名单。它将有助于坚持这一主题以及。反应体系中真理概念的单一来源也将得到满足。
const persistConfig ={ key：'root'，存储:存储，白名单：‘导航’/只导航减速器将持久化}；
Stack Overflow用户
发布于 2022-03-05 04:18:23
Next.js是一个服务器端呈现框架，这意味着初始值来自服务器。在到达客户端之前，无法从服务器访问本地存储。
如果您希望从服务器端获得主题数据，可以使用nookies，它是用于NextJs的cookies助手。
https://github.com/maticzav/nookies
你的逻辑也许是这样的
useEffect(() => {
nookies.set({},"theme", JSON.stringify(dark));
}, [dark]);
useEffect(() => {
const {theme} = nookies.get({}));
if (theme) {
setDark(theme);
}
}, []);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71350363
复制相关文章
相似问题
腾讯云开发者
