OrangePineapple OrangePineapple - 1 month ago 8
Javascript Question

Can't store todos to local storage

I'm learning JavaScript right now and one of the practice application I am doing is to make a to-do list to learn the basics. Right now I'm having a hard time saving my inputs onto the local storage. I look into the console and local storage of my browser and only see that a key "todos" is being created but no values are stored in it.

I was wondering if anyone can help. Please ignore the way I structured my coding. I am still learning. (I know there are better and more efficient ways to make a to-do list.)

My code:

<body>
<header class = "centerAlign ">to-do list </header>
<div class = "divA centerAlign input-group container" style = "list-style-type:none">
<input class = "form-inline input-lg" id="itemInput" "type="text" placeholder="add things to do"/>
<button class = "addButt btn btn-lg">
<span class="glyphicon glyphicon-plus"></span>
</button>

<ul class = "ulist1 container">
<!--List items gets inserted here-->
</ul>
</div>
<button class = "clearAll btn">Clear localStroage</button>

<script>
getTodos();

//press enter to submit
$("input").on('keydown',function(e){
if(e.keyCode ==13){
$("<li>").attr("class","apples").html(itemInput.value).fadeIn().appendTo(".ulist1");
$("<button>").attr("class","doneButt btn pull-left glyphicon glyphicon-ok").appendTo($(".apples").last());
$("<button>").attr("class","delButt btn pull-right glyphicon glyphicon-trash").appendTo($(".apples").last());
clearInput();
saveTodos();
}
});

//click the submit button
$(".addButt").click(function(){
$("<li>").attr("class","apples ").html(itemInput.value).fadeIn().appendTo(".ulist1");
$("<button>").attr("class","doneButt btn pull-left glyphicon glyphicon-ok").appendTo($(".apples").last());
$("<button>").attr("class","delButt btn pull-right glyphicon glyphicon-trash").appendTo($(".apples").last());
clearInput();
saveTodos()

});

//clears the input box for new text
function clearInput(){
itemInput.value = "";
}

//button to delete
$(".ulist1").on("click", ".delButt", function(e) {
e.preventDefault();
$(this).parent().fadeOut(function(){
$(this).remove();});
});

//put a line through the text and undo that line
$(".ulist1").on("click", ".doneButt", function(e) {
$(this).parents("li").toggleClass('withline');
});

//save data localStorage
$(".addButt").click(function(){
saveTodos();
});

function saveTodos(){
localStorage.setItem("todos", itemInput.value);
}

//get data from localStorage
function getTodos(){
localStorage.getItem("todos");
}

</script>

<script>//delete localstroage
$(".clearAll").click(function() {
window.localStorage.clear();
location.reload();
return false;
});

</script>



Answer

You call your own clearInput() function before you call saveTodos(). This means you first clear your input field and then save the value of the (now empty) input field to your local storage.

Therefore, you will always have the key 'todos' with an empty String as its value.

To be able to save your last entered input in your desired localStorage variable you'd just need to move the saveTodos() call before the clearInput() call.

However your use case suggests that you surely want to save more than just the last entered input but several todos. To achieve that, you will have to either use a seperate key for every entry or story all entries as an array. As LocalStorage only supports String values, you would have to use something like JSON.stringify