带有 localStorage 的 toDoList

Question

I have to do a simple todo app with local storage. I've done this app that works but without local storage. How can i add a localStorage in my todoList? I mean that if i refresh the page, my todoList is saved automatically. I can't do it. if anyone can help me, i would really appreciate it.

var todoList = [];
function addTodo(frm)
{
    var todo = frm.txtTodo;
    if(todo.value != "")
    {
        todoList.push({"title":todo.value,"status":1});
        todo.value="";
    }
    else
    {
        alert("you have to write something!");
        return false;
    }

    todo.focus();


    displayTodoItems();
    return false;
}

function todoAction(no,action)
{
    if(no != null)
    {
        todoList[no].status = action;
    }
    displayTodoItems();
}

function todoDelete(no)
{
    todoList.splice(no,1);
    displayTodoItems();
}

function displayTodoItems(){
    var contStart = "<ul>";
    var listItems = "";
    var contEnd = "</ul>";

    if(todoList.length > 0)
    {
        for(var i=0; i < todoList.length; i++)
        {
            var actionClass = todoList[i].status==0?"Done":"Not done";  
            var setStatus =  todoList[i].status==0?1:0;
            listItems+= "<li class='"+actionClass+"'><span class='title'>"+todoList[i].title+"</span>"
            listItems+= "<span class='action'><a href='javascript:void(0);' onClick='todoAction("+i+","+setStatus+");'>";
            listItems+= todoList[i].status==0?"Not done":"Done";
            listItems+= "</a> <a href='javascript:void(0);' onClick='todoDelete("+i+");'> X </a>";
            listItems+="</span></li>";
        }
    }
    else
    {
        listItems+= "<li><span class='title'>There are not tasks!</span></li>";
    }



    document.getElementById("todoList").innerHTML = contStart+listItems+contEnd;
}

Answer 1

Simple example to create To-do list using local storage:

The following code with not work in stack overflow due to security concern do try at your system.

 (function(){ var list = document.querySelector('#list'), form = document.querySelector('form'), item = document.querySelector('#item'); form.addEventListener('submit',function(e){ e.preventDefault(); list.innerHTML += '<li>' + item.value + '</li>'; store(); item.value = ""; },false) list.addEventListener('click',function(e){ var t = e.target; if(t.classList.contains('checked')){ t.parentNode.removeChild(t); } else { t.classList.add('checked'); } store(); },false) function store() { window.localStorage.myitems = list.innerHTML; } function getValues() { var storedValues = window.localStorage.myitems; if(!storedValues) { list.innerHTML = '<li>Make a to do list</li>'+ '<li>Check off first thing on the to do list</li>'+ '<li>Realize you have already accomplished 2 things in the list</li>'+ '<li>Reward yourself with a nap</li>'; } else { list.innerHTML = storedValues; } } getValues(); })();

 body { background: #eee; color: #444; font-family: 'Helvetica', arial, sans-serif; } .container { background: #fff; max-width: 600px; width: 100%; display: table; margin: 0 auto; margin-top: 40px; border: 1px solid #cfcbcc; } input { border: none; display: block; width: 98.4%; line-height: 1.5; padding: 8px 0 8px 10px; border-bottom: 1px solid #cfcbcc; outline: 0; } h1, h2 { text-align: center; margin-bottom: 0px; line-height: 1; } h2 { color: gray; } ul { list-style: none; margin: 0; padding: 0; li { color: #899098; font-weight: 400; border-bottom: 1px solid #cfcbcc; line-height: 1.5; padding: 8px 0; &:before { content: "\\25A1"; padding: 10px 10px; font-size: 20px; } &:hover { text-decoration: line-through; cursor: pointer; } &:last-child { border-bottom: none; } } } .checked { color: green; &:before { content: "\\2713"; padding: 10px 10px; font-size: 20px; } &:hover { text-decoration: none; &:after { content: "(remove)"; color: tomato; text-align: right; } } }

 <h1>To-Do List</h1> <div class="container"> <form action="#"> <input type="text" name="item" id="item" placeholder="Add New" /> </form> <ul id="list"></ul> </div>