如何在Vuejs中刷新页面也能保持localstorge中的数组值？-前端问题

How to maintain array value in localstorge even if page is refreshed in Vuejs?(如何在Vuejs中刷新页面也能保持localstorge中的数组值？)

本文介绍了如何在Vuejs中刷新页面也能保持localstorge中的数组值？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

HelloWorld.vue

<template>
  <div>
    <div v-for="item in items" :key="item.cakeid">
      <b> id: {{ item.cakeid }}</b>
      <router-link
        :to="{
          name: 'UserWithID',
          params: { id: item.cakeid },
          query: { cakeid: item.cakeid },
        }"
      >
        {{ item.cakeName }}
      </router-link>
    </div>
    <br /><br /><br />
    <User />
    <br /><br /><br />
    <tabs />
  </div>
</template>

<script>
import User from "./User.vue";
import tabs from "./tabs.vue";
import { router } from "./router";
export default {
  name: "HelloWorld",
  components: {
    User,
    tabs,
  },
  data() {
    return {
      items: router,
    };
  },
};
</script>

User.vue

<template>
  <div>
    <div v-for="(item, key) in user" :key="key">
      {{ item.cakeName }} <br />
      {{ user.total }}{{ item.cakePrice }} <br />
      {{ user.total }}{{ item.total }}
    </div>
  </div>
</template>

<script>
import { routerid } from "./routerid";
export default {
  name: "User",
  data() {
    return {
      lists: routerid,
    };
  },
  computed: {
    user: function () {
      return this.lists.filter((item) => {
        if (item.cakeid === this.$route.params.id) {
          return item;
        }
      });
    },
  },
};
</script>

tab.vue

<template>
  <div>
    <div v-for="(item, key) in user" :key="key">
      {{ item.chefname }} <br />
      {{ user.feedback }}{{ item.rating }} <br />
    </div>
  </div>
</template>

<script>
import { tabsandcontent } from "./tabsandcontent";
export default {
  name: "User",
  data() {
    return {
      lists: tabsandcontent,
    };
  },
  computed: {
    user: function () {
      return this.lists.filter((item) => {
        if (item.cakeid === this.$route.params.id) {
          return item;
        }
      });
    },
  },
};
</script>

如何在Vuejs中刷新页面后仍保持数据活动？

在单击routerlink时，我根据每个数组ID过滤一些值。并显示这些数组值。

在此过程中，单击路由器链接显示数组值后，如果刷新页面，则不会显示之前显示的所有数组值。

我想保留数据，即使在刷新页面之后也是如此(就像之前单击的状态一样)。我认为这可以通过使用localstorage get和set项来处理。

但不确定将其放置在哪里。？