如何使用 Nuxt.js 将数据存储到本地存储

Posted 2023-02-22

【中文标题】如何使用 Nuxt.js 将数据存储到本地存储

【英文标题】：How to store data to local storage with Nuxt.js

【发布时间】：2018-05-06 02:26:05

【问题描述】：

如您所知，nuxtjs 是服务器端渲染，没有很好的示例如何将数据存储到客户端的本地存储中。

我的工作是需要建立登录表单，用户可以将用户名和密码放入表单中，然后将其发送到服务器（通过 api）进行检查，如果登录数据正确，api 将返回一个令牌密钥，然后我将存储验证此密钥是用户是 authen 并将其与其他 api 一起使用。

我找到了一些示例，但在这里使用 vuejs 构建 https://auth0.com/blog/build-an-app-with-vuejs/ 但我不知道如何将其更改为 nuxtjs。

任何我读过的https://github.com/robinvdvleuten/vuex-persistedstate 都可以插入到我的项目中，但我希望看到其他解决方案。

问候。

【参考方案1】：

Nuxt 为您提供process.client 告诉它只在客户端执行

所以像这样使用它：

methods: 
  storeToken(token) 
    if(process.client) 
      localStorage.setItem("authToken", token)
    
  

查看此link 了解更多信息。

【讨论】：

已编辑以更新已弃用的process.browser。

【参考方案2】：

您可以使用process.client 来检查它是否在客户端。

export default 
  created() 
    this.storeToken();
  ,
  methods:
    storeToken(token)
      if(process.client)
          localStorage.setItem("authToken", token);
      
    
  

你也可以在mounted中调用这个方法而不检查process.client。

export default 
  mounted() 
    this.storeToken();
  ,
  methods:
    storeToken(token)
       localStorage.setItem("authToken", token);
    
  

【讨论】：

已编辑以更新已弃用的process.browser。

【参考方案3】：

聚会有点晚了，但我遇到了类似的问题。

但首先我建议您使用 cookie 来保存密钥/令牌/jwt。 原因是可以通过 JS api 劫持 localStorage，并且可以保护 cookie。但是，您必须保护您的令牌免受 CSFR 的影响。 这可以通过查看 Refence 和 Origin 标头服务器端来完成。 这家伙写了一篇关于如何做到这一点的好帖子：How to protect your HTTP Cookies

至于从 Nuxt 访问 localStorage，我们开始：

如果您正在运行 Nuxt 并且没有告诉它以 spa 模式运行，它将以通用模式运行。 Nuxt 将通用模式定义为：

同构应用（服务器端渲染+客户端导航）

结果是 localStorage 未在服务器端定义，因此引发错误。

给我的好处是控制台日志从中间件文件和 Vuex 输出到终端，而不是浏览器中开发人员工具中的控制台。

如果您想了解更多关于我的解决方案的信息，可以在这里找到：localStorage versus Nuxt's modes

【参考方案4】：

如果您计划存储少量数据（低于 4096 字节），则可以使用 cookie。我推荐图书馆cookie-universal-nuxt。

npm install cookie-universal-nuxt --save

nuxt.config.js

modules: [
    'cookie-universal-nuxt',
],

那么你可以使用：

const data = 
    anything: 'you want',


this.$cookies.set('thing', data, 
    path: '/',
    maxAge: 60 * 60 * 24 * 7
);

this.$cookies.get('thing');

如果需要，请阅读库文档了解更多信息。

cookie 将在服务器端可用，因此您可以解决 localStorage 的问题。

请注意，每个 cookie 最多只能存储 4096 个字节。

例如，我在 Vuex 的 nuxtServerInit 函数中获取 cookie 数据，然后数据在应用服务器端的任何地方都可用。

【讨论】：

完美，谢谢！