todo with localstorage

index.html

<div id="todo" class="container col-md-4 col-md-offset-4">
		<h1>TODO APP</h1>
		<ul id="listTodo" class="list-group">
			
		</ul>
		<input id="nama" type="text" name="add" class="form-control" placeholder="Enter to add TODO">

	</div>

script.js

$(document).ready(function(){
			var cekSave = localStorage.getItem('todos');
			var dataList = (cekSave!=null)?JSON.parse(cekSave):[];
			var localSet = function(){
				localStorage.setItem('todos',JSON.stringify(dataList));
			}
			localSet();
			var dat="";
			for(var i=0;i<dataList.length;i++){

				dat +="<li class='list-group-item'><a href='' class='badge'>Delete</a><span>"+dataList[i]+"</span></li>";
			}

			$("#listTodo").append(dat);
			$("#nama").on('keyup',function(e){
				
				if(e.keyCode == 13){
					if($("#nama").val().trim().length > 0){
						$("#listTodo").append("<li class='list-group-item'><a href='' class='badge'>Delete</a><span>"+$("#nama").val()+"</span></li>");
						dataList.push($("#nama").val());
						$("#nama").val('');
					}else alert("tidak boleh kosong");
					// console.log(dataList);
					localSet();
				}
				

			});
			$("a.badge").click(function(){
				var x = $(this).index('a.badge');
				// console.log(x);		
				dataList.splice(x,1);
				$("li").eq(x).remove();
				localSet();
			});
		});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

todo-with-localstorage.markdown

todo with localstorage

todo using localstorage

A Pen by bona on CodePen.

License.