Basic ToDo List storing the data

Question

I have been working to put together a to do list application from scratch. So far I have used HTML, CSS, Javascript and JQuery to do this. I have now got all the base functionality working for the most part. Now comes the hard part which is actually storing and retrieving real data to display.

I know php/mysql would work for this, but I am trying to keep this basic for my first big project and not overwhelm myself. So I though AJAX would work, but it seems that AJAX can only read filed and not right them. So now I am wondering what a good basic language or technology would be to use to get and store the data. Maybe AJAX and XML file? But do I still need another language? Or can it all by client side?

https://jsfiddle.net/pnewelljr/jqdkfLdx/38/

$(document).ready(function() {
    
    $(document).on("click",".items",function() {
        $(this).remove();
    });
    
    $(document).on("click","li", function () {
        $("li").removeAttr("class");
        $(this).attr("class","selectedlist");
        $(".items, #itemsbar > p").remove();
        $("#itemsbar").append('<div class=\"items\" id=\"c1div\"><input type=\"checkbox\" id=\"c1\" name=\"c1\" /> \
        <label for=\"c1\"><span></span>New Box~</label></div><p>Click to Add</p>');
    });
    
    $(document).on("click","#itemsbar > p",function () {
        $(this).remove();
        $("#itemsbar").append('<input class="addnew" type=\"text\"></input>');
    });
    
    $(document).on("keyup",'.addnew', function (e) {
        if (e.which == 13) {
            var value = $(".addnew").val();
            $("#itemsbar").append('<div class=\"items\" id=\"c1div\"><input type=\"checkbox\" id=\"c1\" name=\"c1\" /> \
            <label for=\"c1\"><span></span>' + value + '</label></div>');
            $(this).remove();
            e.preventDefault();
            $("#itemsbar").append('<p>Click to Add</p>');
        }
    });
    
    $(document).on("click","#addlist",function() {
        $("#listsbar").append('<input class="addnewlist" type=\"text\"></input>');
    });

    $(document).on("keyup",'.addnewlist', function (e) {
        if (e.which == 13) {
            var value = $(".addnewlist").val();
            $("#lists").append('<li id="l3">' + value + '</li>');
            $(this).remove();
            e.preventDefault();
        }
    });
    
});

h1 {
    font-size: 150%;
    color: white;
}

#title {
    float: left;
}

#main {
    height: 100vh;
    width: 100vw;
}

/* Lists Bar */

#listsbar {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 30%;
    height: 100%;
    float: left;
    background-color: #6678AC;
}

#listsbar h1, li {
    padding: 10px;
}

#listsbar ul {
    list-style-type: none;
    padding: 0;
}

#lists li {
    color: white;
}

.selectedlist {
    width: 100%;
    background-color: #0D1839;
    display: block;
}

/* Items Bar */

#itemsbar {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 70%;
    height: 100%;
    padding: 20px;
    float: right;
    background-color: #C7D5FF;
}

#itemsbar ul {
    list-style-type: none;
    padding: 0;
}

<div id="main">
    <div id="listsbar">
        <h1 id="title">To Do List</h1>
        <h1 id="addlist">+</h1>
        <ul id="lists">
            <li id="l1" class="selectedlist">Test List</li>
            <li id="l2">Test List 2</li>
        </ul>
    </div>
    <div id="itemsbar">
        <div class="items" id="c1div"><input type="checkbox" id="c1" name="c1" />
        <label for="c1"><span></span>Check Box 1</label></div>
        <div class="items" id="c2div"><input type="checkbox" id="c2" name="c2" />
        <label for="c2"><span></span>Check Box 2</label></div>
        <p>Click to Add</p>
    </div>
</div>

Answer 1

If you want to save your data on the server, you must use a database (like mysql). If you can store data only on the client side, you can use localstorage to do that. Php can be your server-side language to get the datas from the database. Ajax will help you to get content without reloading the whole page. I recommend you to follow a simple tutorial. This tutorial can help you to do your to-do list. It use html, javascript, css, php, ajax, mysql.

Answer 2

Local Storage.

var data = document.getElementById('listsbar').innerHTML;
localStorage.setItem('ToDos',data);

And to retrieve it:

document.getElementById('listsbar').innerHTML = localStorage.getItem('ToDos');

Here's an example of using localstorage on jsfiddle.

http://jsfiddle.net/Tobsta/xodfj5y5/

It works if you save it as an html file, but jsfiddle won't run it due to security issues. Here's a tutorial:

http://www.w3schools.com/html/html5_webstorage.asp

Answer 3

For storing data you need a database or another place that can store data. You can't achive this by doing client-side work only. There are a lot of things you can use: php + mysql, .net +sql serverand so on.

Ajax is not a tool for storing data, it's just an 'option' to call an API( or a server side method ).

Ajax is not a programming language or a tool, but a concept. Ajax is a client-side script that communicates to and from a server/database without the need for a postback or a complete page refresh. The best definition I’ve read for Ajax is “the method of exchanging data with a server, and updating parts of a web page - without reloading the entire page.”

You said you are at the beginning, so I recommend you start learning a technology because you'll need it in the future. You can start with PHP ( from what I've heard it's easier than .NET )

Another tool you can use ( if you want to write javascript ) is nodejs which can play the server's role and it's written in javascript

Of course, there is a possibility to store data on client side, but I don't recommend it to you, mainly because you're at the beginning and you should learn some server side technology as well. I'm talking about storing data into localStorage

localStorage is a way to store data on the client's computer.

Example :

localStorage.token= "12345";
// or
localStorage.setItem('token','12345');