Vue.js待办应用如何将数组及内部对象存储到localStorage

核心原理 #

• localStorage本身仅支持存储字符串类型的数据，当你直接将对象、数组这类引用类型值赋值给localStorage的属性时，JS会自动调用值的toString()方法做隐式转换：普通对象调用toString()的返回结果就是固定的"[object Object]"，所以你无法拿到原对象的结构。
• 要存储结构化数据（数组、对象），需要先通过序列化方法把数据转成符合格式的字符串，读取的时候再通过反序列化方法把字符串还原成原结构化数据。

正确实现代码 #

data() {
  return {
    array: [
      {id: 1, label: 'learn vuejs'},
    ]
  }
}, 
methods: {
  persist() {
    // 序列化：将数组转成JSON字符串后存入localStorage
    localStorage.setItem('array', JSON.stringify(this.array))
    alert('items saved')
  }
},
mounted() {
  const localArray = localStorage.getItem('array')
  if (localArray) {
    try {
      // 反序列化：将JSON字符串还原成数组对象
      this.array = JSON.parse(localArray)
    } catch (e) {
      // 容错处理：如果本地存储的内容格式非法，重置为空数组
      this.array = []
      localStorage.removeItem('array')
    }
  }
},

额外注意事项 #

• 加try-catch容错是为了避免手动修改localStorage内容、或者存储的JSON被破坏时，页面加载直接报错的问题
• 建议使用localStorage提供的标准setItem/getItem方法操作存储内容，比直接给localStorage加属性兼容性更好

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