如何在Vue中将hashmap类型数据正确存储到localStorage

问题根因 #

localStorage 仅支持存储字符串类型数据，直接存入HashMap/对象类型时，会自动调用对象的toString()方法，最终存储的是[object Object]这类无意义的字符串，无法保留原有数据结构。

解决方法 #

存储数据时用JSON.stringify()将对象序列化为字符串，读取数据时用JSON.parse()将字符串反序列化为对象即可。

修正后代码 #

JS逻辑部分 #

...
  data() {
    return {
      // 初始化时保证summaries为对象类型
      summaries: {}
    }
  },
  mounted() {
    if (localStorage.summaries) {
      // 读取时反序列化，加异常捕获避免非法格式导致页面报错
      try {
        this.summaries = JSON.parse(localStorage.summaries);
      } catch(err) {
        console.warn('本地存储的summaries格式异常，已重置', err)
        this.summaries = {}
        localStorage.removeItem('summaries')
      }
    }
  },
  ...
  deleteRow(symbol) {
    delete this.summaries[symbol]
    // 存储时序列化
    localStorage.summaries = JSON.stringify(this.summaries)
  },
...

原有HTML逻辑无需修改，可正常使用。

内容的提问来源于stack exchange，提问作者jginso7