javascript - 如何将数组对象保存到Chrome本地存储中

标签 javascript arrays object local-storage vuex

我正在构建一个Budget-Calculator-App,它将用户数据保存到Chrome本地存储中。
想法是,每个人都可以通过自己的设备使用此应用程序,从而无需数据库。

我一直坚持将整个数据状态保存到本地存储中。我做了一个屏幕截图,以显示我的意思和得到的东西,而不是对象数组。
preview of what my output is

如您所见,我没有保存阵列,我也不知道为什么。



这是代码:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    users: [
      {
        userName: 'John',
        salary: 2000,
        leftover: 0,
        active: false,
        inc: [],
        exp: []
      }
    ]
  },
  getters: {
    users: state => {
      return state.users;
    }
  },
  mutations: {
    addNewUser: (state, payload) => {
      state.users.push(payload);
    }
  },
  actions: {
    saveStateInStorage: (context, payload) => {
      context.commit('addNewUser', payload);
      // save current state into chrome local storage
      console.log(context.state.users);
      let userData = context.state.users;
      localStorage.setItem('budgetCalcUserData', userData);
    },
    updateStorageState: context => {
      console.log(context);
    }
  },
  modules: {}
});



除了保存到本地存储之外,其他所有方法都工作正常。

最佳答案

您应该存储字符串化数组:

尝试

localStorage.setItem('budgetCalcUserData', JSON.stringify(userData));


访问时,您必须解析以下内容:

var user = JSON.parse(localStorage.getItem('budgetCalcUserData'));

关于javascript - 如何将数组对象保存到Chrome本地存储中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60465510/

相关文章:

javascript - 字母数字值的正则表达式模式

c# - 在c#中使用字符串数组生成组合

c# - 关键字 "new"对 C# 中的结构有何作用?

Javascript:在 'select' 上运行函数 'option'/How to stop setInterval(...);?

javascript - 与addEventListener附加时不调用事件

java - 如何检查2 * 2数组的所有元素是否为真?

c++ - C++创建静态 vector 后无法在 vector 中编辑 vector 的项目

mysql - Laravel DB查询到数组

javascript - 3d上的深度比例错误

java - 如何从数组中选择一个值?