Как я могу сохранить данные локального хранилища с одной страницы на другую?

Question

Я почти закончил работу со своим первым приложением Vue.js, и последнее, что мне нужно сделать, это сохранить данные локального хранилища, чтобы я мог получить к ним доступ на другой странице.Я приведу вам пример.

На данный момент у меня есть методы локального хранения (вместе с некоторыми менее важными свойствами данных):

data() {
    return {
      testData: [],
      testDataIndex: 0,
      selectedIndex: null,
      submittedIndex: null,
      healthScore: 0,
    }
  }, 
computed: {
    setHealthScore() {
      localStorage.setItem('SavedHealthScore', this.healthScore)
    },
    getHealthScore() {
      localStorage.getItem('SavedHealthScore')
    },
  },

Это тест на работоспособностьприложение.Итак, после того, как пользователь ответит на последний вопрос, я хочу, чтобы его / ее перевели на последнюю страницу (это меняет маршрут), чтобы можно было вернуть «оценку здоровья».На протяжении всего теста показатель здоровья увеличивается на определенное значение в зависимости от того, какой ответ дает пользователь.Вычисленные выше методы успешно отслеживают состояние здоровья и сохраняют его в локальном хранилище.То есть до тех пор, пока пользователь не закончит тест и не достигнет последней страницы.Затем показатель здоровья в локальном хранилище возвращается к 0, потому что к этому возвращается исходный показатель здоровья.

Я хочу, чтобы показатель здоровья в локальном хранилище сохранял последнее известное значение исходного показателя здоровья перед этим.возвращается к 0. Таким образом, я могу вернуть оценку здоровья в локальном хранилище для отображения пользователю.Прямо сейчас, на последней странице просто отображается 0/21 независимо от полученных ответов, очевидно, это не то, что я хочу.

Как я могу предотвратить возврат моего показателя здоровья локального хранилища обратно к 0?

PS Я знаю, что Vuex потенциально может решить эту проблему, но понимание локального хранилища для меня сейчас важнее, чем изучение Vuex.

Answer 1

Ниже приведены некоторые варианты обработки постоянного хранилища, однако ваша проблема в вашем коде заключается в настройке хранилища на основе вычисляемого свойства.В тот момент, когда компонент будет отключен, вычисленное свойство вернется к значению по умолчанию, в вашем случае 0. Это можно увидеть в действии, если вы измените свой счет по умолчанию с 0 на 1 и обновите свое приложение, вы заметите, что localstorage возвращается к1 после теста.

РЕДАКТИРОВАТЬ: Добавление закомментированного ответа для получения дополнительной информации.

Вы можете переместить его в нажатие кнопки, возможно, при сохранении или отправке, или даже добавить некоторыелогика для вычислений, если вы действительно хотите, чтобы она была вычислена.

if(this.healthScore != 0) { localStorag.setItem(this.healthScore) }

Ваш запрос должен получить из localStorage и присвоить обратно локальной переменной

getHealthScore() {
  this.healthScore = localStorage.getItem('SavedHealthScore')
},

Таким образом, он будет устанавливать локальное хранилище только в том случае, если результат теста не равен 0.

Вам необходимо вызывать хранилище из другого события, а не из вычисляемого свойства.Или вам нужно добавить логику, чтобы предотвратить постоянное сохранение вычисляемого в локальное хранилище

(Вы уже знаете, но я все равно сообщу вам, если это будет полезно)

Варианты постоянного хранения:

1) вы используете браузер localStorage и сохраняете там информацию, которая будет сохраняться до тех пор, пока пользователь не очистит свой браузер, однако, в вашем случае вы можете рассмотреть sessionStorageтак как он будет очищен, когда они покинут ваше приложение.Нет необходимости устанавливать какие-либо пакеты NPM для них, поскольку они уже доступны.Приведенный ниже фрагмент кода на случай, если вы хотите создать один метод, если вы хотите вместо этого использовать Session, просто измените localStorage на sessionStorage и альт.

**
 * Adds an item to Storage
 * @param key The Key value
 * @param value The String Value to be Stored
 */
export function AddToStorage(key: string, value: string): any {
    localStorage.setItem(key, value);
}

2) Еще немногоболее сложный выбор, но вы увидите, что он используется в проектах среднего и большого уровня - Vuex, который является способом обработки состояния Vue при переходе через приложение.Настройка для него немного сложна и излишня для вашего проекта, который уже почти закончен, но если вы хотите окунуться в это, это будет хорошей возможностью.

Answer 2

Вы не должны использовать вычисленные методы для установки значений в локальном хранилище внутри каждого компонента.Лучший способ установить значение в локальном хранилище, когда значение не определено или изменено.фрагмент кода, как показано ниже:

let healthScore = localStorage.getItem("healthScore");
if(healthScore == undefined) {
  localStorage.setItem("healthScore");
}

Вы должны сначала проверить, есть ли какое-либо значение, назначенное в локальном хранилище.если нет, тогда назначьте значение по умолчанию, в вашем случае установите значение 0.