如何使用 Nuxt.js 从全局中间件获取客户端的 localStorage 值

Question

我已经在我的Nuxt.js项目中实现了在深色和浅色之间更改主题的功能，但我还有一个问题。

在用户更改设置主题后，他会在本地存储中获得标志。 标志_t （主题）和值 - _d代表黑暗， _l代表光明。 根据这些值，脚本必须将属性data-theme设置为暗或亮，然后根据scss变量设置主题。

问题是 - 我怎样才能从localStorage获得这个值。 当然，在每个页面上我都可以创建mounted()钩子并检查localStorage中的值，但是我必须在我创建的每个页面上都这样做，这似乎不是正常的解决方案。 我正在考虑全局中间件并创建了一个。

export default function() {
  if (process.server) return
  const t = localStorage.getItem('_t')
  if (!t) {
    localStorage.setItem('_t', '_d')
    document.documentElement.setAttribute('data-theme', 'dark')
  } else {
    document.documentElement.setAttribute('data-theme', t === '_l' ? 'light' : 'dark')
  }
}

我工作，但不太正确。 Nuxt.js与 SSR 一起使用，因此基本上第一次在服务器上调用中间件，然后才在客户端调用。 这就是为什么我有这个if (process.server)检查，因为localStorage在服务器端不可用。

这个解决方案的问题是，在页面重新加载后，您不会在HTLM中看到这个data-theme="dark" 。 正因为如此，风格似乎被“打破”了。 仅当您通过单击nuxt-link进入此页面时它才有效，因为它适用于客户端。

那么，在这种情况下，最佳做法是什么。 是否有机会在全局范围内实施此检查，而不是在每个页面上的mounted()挂钩中检查localStorage值？

Answer 1

您可以使用相同的方法，但可以使用cookies而不是localStorage ，因为cookies是通过每个 HTTP 请求发送的，因此您可以在服务器端和客户端访问它。

您可以使用此库来管理您的 cookie。

https://www.npmjs.com/package/cookie-universal-nuxt

有关 cookie 的更多资源。

https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie