Snimanje podataka sa vue.js

Da bi smo sadržaj todo liste (https://programiranje.com.hr/todo-lista) snimili u localStorage preglednika u kod dodajemo novu funkciju snimi() koja sprema array tasks. Ovjde koristimo JSON.stringify koji array pretvara u string te ga sa localStorage.setItem snima u local storage preglednika, pod imenom todoTasks.

Funkcija snimi() se poziva prilikom dodavanj ili brisanja novog task-a. Učitavanje vršimo pomoću funkcije ucitaj(), a JSON.parse pretvara string u array. Ovu funkciju pozivamo klikom na gumb ili prilikom učitavanja stranice sa created: function(){ this.ucitaj(); },

 


<html>
<head>
    <script src="https://unpkg.com/vue@next"></script>
    <title>Todo list</title>
</head>
<body>

<div id="app">
    <input type="text" placeholder="naziv zadatka"  v-model="taskInput">
    <button @click="addItem">Dodaj</button>
    <button @click="ucitaj">Učitaj</button><br>
    

        <table id="todoTable">
            <tr v-for="(task,index) in tasks">
              <td><b>{{index + 1}}.</b></td><td>{{task.content}}</td><td><button  @click="deleteItem(index)">Briši</button>
           </td>
           </tr>
           <tr><td colspan="2">Ukupno:</td><td>{{ukupno}}</td></tr>
        </table>

  </div>

    <script>
const app ={data(){
        return{
          taskInput : "",
          tasks : [],
          ukupno : 0,
    }

    },
    created: function(){
            this.ucitaj();
    },
    methods:{
        addItem(){
            if(this.taskInput!=""){
            newTask = {
                content : this.taskInput,
            }
            this.tasks.push(newTask)
            this.taskInput=""
            this.ukupno++;
            this.snimi();
            }
        },
        deleteItem(index){
            this.tasks.splice(index, 1);
            this.ukupno--;
            this.snimi();
        },
        snimi() {
            localStorage.setItem('todoTasks', JSON.stringify(this.tasks));       
        },
        ucitaj() {
                var j = JSON.parse(localStorage.getItem("todoTasks"));
                if (j) {
                    this.tasks = j;
                    this.ukupno = j.length;
                }
            }
        }
}


Vue.createApp(app).mount("#app")

</script>

</body>
</html>