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

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>

How to keep data alive, Even after page is refreshed in Vuejs?

On clicking of routerlink, I am filtering some values based on each array id. and displaying those array values.

During this process, after array values are displayed on click of router-link, if i refresh the page, All the array values which is displayed previously is not getting displayed.

I want to keep data, as it is(like previously clicked to state) even after page is refreshed. I think this can be handled by using the localstorage get and set items.

But not sure where to place it.?

CodePudding user response：

The problem is that when you refresh the page, this part this.$route.params.id in User.vue returns the id as a string and you are checking item.cakeid === this.$route.params.id using three equal symbols. Thus meaning that not only you require the values to be equal but also to be the same type.

Just change that to == or use the parseInt function to parse the integer from the string.