Как сохранять состояния кнопок при переходе по страницам vue SPA?

Question

[Максим js]

Сохраняю элемент в localstorage при клике по кнопке, при этом кнопку добавления сразу скрываю, а кнопку удаления показываю. Проблема в том что при переходе на другую страницу куда вывожу добавленные элементы из localstorage, там элемент отображается опять с кнопкой добавления, а при возврате на главную на тех элементах которые были добавлены в localstorage опять отображается кнопка добавления хотя они уже в localstorage.
Подскажите как сохранить состояния при переходе по страницам и обновлении страницы.

вот логика самой карточки

<template>
    <div class="card">
        <h2 class="card__title">{{ character.name }}</h2>
        <div class="card__img">
            <img :src="character.image" alt="image">
        </div>
        <div class="card__action">
            <span>{{ character.gender }}</span>
            <div>
                <div v-if="allowSave" class="card__btn card__btn--favorites" @click ="saveItem"></div>
                <div v-if="allowDelete" class="card__btn card__btn--delete" @click="deleteItem"></div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'Card',
    data() {
        return {
            allowDelete: false,
            allowSave: true
        }
    },
    props: {
        character: {
            type: Object,
            required: true
        },
    },
    methods: {
        saveItem() {
            let items = JSON.parse(localStorage.getItem('favorites')) || [];
            items.push(this.character)
            localStorage.setItem('favorites', JSON.stringify(items))
            this.allowSave = false
            this.allowDelete = true
        },
        deleteItem() {
            let items = JSON.parse(localStorage.getItem('favorites'))
            items = items.filter(character => character.name !== this.character.name)
            localStorage.setItem('favorites', JSON.stringify(items))
            this.allowDelete = false
            this.allowSave = true
        },
    }
}

а на добавленной карточке получается нужна только кнопка удаления

<template>
  <div class="favorites">
    <div class="favorites__inner">
        <Card v-for="character in favorites" :key="character.id" :character="character"/>
    </div>
  </div>
</template>

<script>
import Card from "../components/Card";

export default {
    name: 'Favorites',
    components: {
        Card
    },
    data() {
        return {
            favorites: [],
        }
    },
    methods: {
        fetchFavorites() {
            this.favorites = JSON.parse(localStorage.getItem('favorites'))
        }
    },
    mounted() {
        this.fetchFavorites()
    }
}

Answer 1

[Alex]

Вот тут

return {
           // Вот тут проверяйте наличие данных в localStorage и устанавливайте значения на их основе
            allowDelete: false,
            allowSave: true
        }

Что-то в таком духе:

data() {
        const isSaved = 
          !! JSON.parse(localStorage.getItem('favorites') || '[]')
          .find(character => character.name !== this.character.name)

        return {
            allowDelete: isSaved,
            allowSave: !isSaved,
        }
    },