vue 数据字典本地存储

在Vue中，可以使用localStorage来实现数据字典的本地存储。localStorage是浏览器提供的一种存储API，可以在浏览器中存储键值对数据。

下面是一个示例代码，展示如何在Vue中使用localStorage来存储数据字典：

<template>
  <div>
    <button @click="saveData">保存数据字典</button>
    <button @click="loadData">加载数据字典</button>
    <ul>
      <li v-for="(value, key) in dataDictionary" :key="key">{{ key }}: {{ value }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataDictionary: {} // 数据字典
    };
  },
  methods: {
    saveData() {
      localStorage.setItem('dataDictionary', JSON.stringify(this.dataDictionary));
    },
    loadData() {
      const storedData = localStorage.getItem('dataDictionary');
      if (storedData) {
        this.dataDictionary = JSON.parse(storedData);
      }
    }
  }
};
</script>

在这个示例中，我们通过点击按钮来保存和加载数据字典。`saveData`方法会将`dataDictionary`对象转换为JSON字符串，并保存在localStorage中。`loadData`方法会从localStorage中加载数据，并将其解析为对象赋值给`dataDictionary`。

请注意，localStorage只能存储字符串类型的值，因此我们使用`JSON.stringify`和`JSON.parse`来进行对象与JSON字符串之间的转换。