The TodoList is very simple, including only the current date display, the display of todo items, and the addition of todo items. This is a DEMO 📃

Let’s start with the simplest unstyled todolist:

1. Build a basic HTML structure

  • store todo items with the

  • tag, which contains a checkbox, a of the contents of a todo item, and a delete : 

    <li v-for="list in lists">
    <input type="checkbox"/ > < span > {{list. The text}} < / span > < button > delete < / button > < / li >Copy the code

    Use the input field and button button to add todo items:

    <input type="text"/> <button> Add </button>Copy the code

    For this project I saved the list of todo items in an array:

    lists : [
    //{
        //id : 0
        //text : ' ',
        //finished : false
    //}
]
Copy the code

    2. Bind methods during operations

    When writing an event and clicking the Add button, use the V-Model to bind the input field to enter the content and use the @click to bind a method to add the event:

    <input type="text" v-model="inputValue" @keyup.enter="addList"/>
<button @click="addList"> add < / button >addList(){// Add a memoif(this.inputValue ! =' '){
        this.lists.push({id : this.lists.length,text : this.inputValue,finished : false});
        this.inputValue = ' '; }}Copy the code

    Delete a button by binding the deleteList method with @click:

    button @click="deleteList(list)">delete</button>

deleteList(list){                   
    this.lists.splice(this.lists.indexOf(list),1);                                
}
Copy the code

    These two pieces are the core of the toDO project, along with the date module:

    Date display module:

    Create a hook function created() because you want to get the current date before rendering to the view.

    Seven days of the week, twelve months of the year, group these corresponding time strings into an array.

    Use new Date() to get the local time, and getDate(), getMonth(), and getDay() can extract the corresponding number, month (counting from 0), and day of the week (Sunday = 0, Monday = 6).

    Then show the obtained time:

    var weekday = ["Sunday"."Monday"."Tuesday"."Wednesday"."Thursday"."Friday"."Saturday"];
var month = ['January '.'February '.'March '.'April '.'May '.'June '.'July '.'August '.'September '.'October '.'November '.'December '];
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth(); //January is 0!
this.weekday = weekday[today.getDay()];
this.month = month[mm];
this.day = dd;
Copy the code

    Finally render with CSS and the UI looks good 🤞 :

    But because once the page is refreshed, the content OF my records will run away, so I looked in the Red Book and found that localStorage can persist client data one solution, most browsers will set a limit of 5MB (Chrome and Safaris 2.5MB), but it seems to be enough. The important thing is that the data remains until it is deleted by JavaScript or the user clears the browser cache.

    LocalStorage stores key-value pair data, so I’m going to store the entire lists array, converting its values to a string using json.stringify ().

    LocalStorage set with setItem:

    localStorage.setItem(key,JSON.stringify(val));
Copy the code

    The value is getItem:

    localStorage.getItem(key);
Copy the code

    Create () then creates localStorage lists before rendering:

    this.lists = myStorage.get('lists') | | []; //JSON string handling reasons, I learned to encapsulate getItem() andsetItem()
function set(key,val){
    localStorage.setItem(key,JSON.stringify(val));
}
function get(key){
    return JSON.parse(localStorage.getItem(key));
}
Copy the code

    This way localStorage will save my records and refresh and restart the page without worrying about Hiahia

    This is my simple learning application for vue.js and localStorage. The complete code can be viewed at my github😊