vue本地存储和获取数据

可以使用浏览器提供的localStorage或sessionStorage进行本地存储和获取数据。其中localStorage是永久存储，而sessionStorage只在当前会话中有效。在Vue中，可以通过以下方式进行本地存储和获取数据：

存储数据：

localStorage.setItem('key', JSON.stringify(data))

获取数据：

JSON.parse(localStorage.getItem('key'))

其中，key为存储数据的键，data为要存储的数据。在获取数据时，需要将获取到的字符串类型数据转换为JSON格式的对象类型数据。

相关问题

vue3从本地存储获取数据

在Vue3中，你可以使用浏览器提供的本地存储方式（localStorage、sessionStorage）来将数据保存在本地。你可以通过以下方式在Vue3中从本地存储中获取数据：

// 从localStorage中获取数据
const data = JSON.parse(localStorage.getItem('myData'))

// 从sessionStorage中获取数据
const data = JSON.parse(sessionStorage.getItem('myData'))

这里假设你的数据是以JSON字符串的形式存储在本地存储中的，因此我们需要使用`JSON.parse`方法将其转换为JavaScript对象。然后你可以将获取到的数据赋值给Vue3组件的数据属性，例如：

import { reactive } from 'vue'

const app = {
  setup () {
    const data = JSON.parse(localStorage.getItem('myData'))

    // 将获取到的数据赋值给组件的数据属性
    const state = reactive({
      myData: data
    })

    return {
      state
    }
  }
}

这样，你就可以在Vue3组件中使用`state.myData`来访问从本地存储中获取到的数据了。

vue3从本地获取数据

在 Vue3 中从本地获取数据可以通过以下步骤实现：

1. 定义一个 data 对象，用于存储数据。

import { reactive } from 'vue';

const data = reactive({
  message: '',
  list: []
});

2. 在组件的 setup 函数中，使用 fetch 或 axios 等工具从本地获取数据，并将数据存储到 data 对象中。

import { reactive } from 'vue';
import axios from 'axios';

const data = reactive({
  message: '',
  list: []
});

export default {
  setup() {
    axios.get('/api/data.json').then(response => {
      data.message = response.data.message;
      data.list = response.data.list;
    });
  }
}

3. 在组件中使用 data 对象中的数据。

<template>
  <div>
    <p>{{ data.message }}</p>
    <ul>
      <li v-for="item in data.list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { reactive } from 'vue';
import axios from 'axios';

const data = reactive({
  message: '',
  list: []
});

export default {
  setup() {
    axios.get('/api/data.json').then(response => {
      data.message = response.data.message;
      data.list = response.data.list;
    });

    return {
      data
    }
  }
}
</script>

以上是一个简单的示例，你可以根据自己的需求进行相应的修改。