即使在 Vuejs 中刷新页面，如何在 localstorage 中维护数组值？

Question

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>

tabs.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 中刷新页面后保持数据存活？

单击路由器link，我根据每个数组 ID 过滤一些值。并显示这些数组值。

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

即使在刷新页面后，我也想保持数据原样（就像之前点击状态一样）。我认为这可以通过使用 localstorage get 和 set items 来处理。

但不确定放在哪里。?

Answer 1

问题是当你刷新页面时，这部分 this.$route.params.id 在 User.vue returns 中的 id 作为一个字符串并且你正在检查 item.cakeid === this.$route.params.id 使用三个相等符号。因此，这意味着您不仅需要值相等，而且类型相同。

只需将其更改为 == 或使用 parseInt 函数从字符串中解析整数。

即使在 Vuejs 中刷新页面，如何在 localstorage 中维护数组值？

How to maintain array value in localstorge even if page is refreshed in Vuejs?

javascript

vue.js

local-storage