Vue.JS - comment utiliser le stockage local avec Vue.JS

Question

Je travaille sur l'éditeur Markdown avec Vue.JS et j'ai essayé d'utiliser le stockage local avec celui-ci pour enregistrer les données, mais je ne sais pas comment enregistrer une nouvelle valeur dans les variables de données dans Vue.JS chaque fois que l'utilisateur tape!

Answer 1

Note ceci était un montage dans ma question, mais je le fais répondre séparément comme suggéré par @nathanvda.

---

J'ai trouvé la solution que je cherchais. Utilisez d'abord la méthode de surveillance pour détecter les modifications sur la variable sur laquelle vous stockez les données, comme ceci:

watch: {
  input: function () {
    if (isLocalStorage() /* function to detect if localstorage is supported*/) {
      localStorage.setItem('storedData', this.input)
    }
  }
}

Ceci mettra à jour la valeur de la variable chaque fois que l'utilisateur ajoute de nouvelles entrées.

Assignez ensuite la nouvelle valeur à la variable comme ceci:

app.input = localStorage.getItem('storedData');

Et c'est tout :)

Answer 2

Vous pouvez simplement faire ce qui suit pour enregistrer dans localStorage

localStorage.setItem('YourItem', response.data)

Vous pouvez récupérer ceci en utilisant:

localStorage.getItem('YourItem')

Pour supprimer ceci de localStorage:

localStorage.removeItem('YourItem')

Answer 3

vous pouvez utiliser v-model pour lier votre variable à chaque changement ou vous pouvez le calculer: {} section.computed ressemble à un crochet de vie de vue.js, il rend à nouveau le composant lorsque ses valeurs sont modifiées.