不能将待办事项存储到本地存储
Can't store todos to local storage
我现在正在学习JavaScript,我正在做的一个实践应用程序是制作一个待办事项列表来学习基础知识。现在我很难将输入保存到本地存储器中。我查看了浏览器的控制台和本地存储,只看到正在创建一个键"todos",但没有在其中存储任何值。
我想知道是否有人可以帮忙。请忽略我编写代码的方式。我还在学习。(我知道有更好、更有效的方法来制作待办事项清单。)
我代码:<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>
在调用saveTodos()之前调用自己的clearInput()函数。这意味着您首先清除输入字段,然后将输入字段的值(现在为空)保存到本地存储。
因此,键'todos'将始终以空字符串作为其值。
为了能够在你想要的localStorage变量中保存你最后输入的内容,你只需要在clearInput()调用之前移动saveTodos()调用。
然而,您的用例表明,您肯定希望保存的不仅仅是最后输入的输入,而是几个待办事项。要实现这一点,您必须为每个条目使用单独的键,或者将所有条目作为一个数组。由于LocalStorage只支持字符串值,因此必须使用JSON.stringify
也许在调用saveTodos();
之前注释掉clearInput();
将解决您的问题。:)
相关文章:
- 不能使用 onClick 声明本地存储
- javascript 全局变量不能存储值,如果它意味着从 HTML 元素中提取它们
- 为什么获胜't这个简单的backbone.js应用程序不能持久化并读取到本地存储
- 为什么我不能使用cordova sqlite存储
- 本地存储不能在openlayers的地理位置中工作
- 不能在导航到新页面后读取本地存储
- HTML5本地存储不能正确存储
- 为什么我不能在ExtJs中使用存储的短名称
- 不能将数组或对象设置为html5 web存储
- 不能存储使用jQuery JSONP获取的数据
- 为什么这个web存储代码不能工作?
- 不能分配超过10GB的HTML5持久存储
- 不能将待办事项存储到本地存储
- Ng-src不能用于本地存储的图像
- 本地存储和IE.不能让它工作
- 不能将JSON数据从动态列表存储到本地存储,Jquery移动
- 不能存储非数字字符
- TinyMCE 4图像工具不能用于远程存储的图像
- JSON web令牌不存储数据或我不能正确访问它
- 本地存储不能给出正确的结果