Использование localStorage во Vue.js

Всем привет!

localStorage может быть невероятно полезным инструментом при создании приложений, расширений и многого другого. В случаях, когда вы храните что-то небольшое для пользователя, которое не нужно хранить постоянно, localStorage — наш друг. Давайте объединим localStorage с Vue.

Упрощенный пример

Вот пример, где мы используем localStorage — простой список дел:

Хранение данных

Мы начинаем с создания реактивных данных, которые нам нужны. Массив todos со списком дел и checked — пустой массив для всего, что выполнено пользователем.

export default {
  data() {
    return {
      checked: [],
      todos: [
        "Set up nuxt.config.js",
        "Create Pages",
        // ...
        ]
     }
   }
}

Так же все это выведем на страницу в теге <template>:

<template>
  <div id="app">
    <fieldset>
      <legend>
        What we're building
      </legend>
      <div v-for="todo in todos" :key="todo">
        <input
          type="checkbox"
          name="todo"
          :id="todo"
          :value="todo"
          v-model="checked"
        />
       <label :for="todo">{{ todo }}</label>
     </div>
   </fieldset>
 </div>
</template>

Mounting и watching

Сейчас мы реагируем на изменения в пользовательском интерфейсе, но еще нигде не сохраняем их. Чтобы хранить их, нам нужно сказать localStorage: «Эй, мы заинтересованы в сотрудничестве с вами». В хуке mounted() добавим в checked данные из localStorage.

mounted() {
  this.checked = JSON.parse(localStorage.getItem("checked")) || []
}

Теперь мы будем следить за свойством checked и, если что-то изменится, мы также обновим localStorage.

watch: {
  checked(newValue, oldValue) {
    localStorage.setItem("checked", JSON.stringify(newValue));
  }
}

Вот и все!

Это все, что нужно для нашего примера. Здесь мы показали один небольшой случай, где мы можем использовать localStorage.

Вольный перевод статьи.