Jquery中的LocalStorage,复选框语句存储
LocalStorage in Jquery, checkbox statement storing
有两个问题:第一个:当我在LocalStorage中添加数据到我的列表时,它会保存它,没有问题,但当我删除数据时,它不会在LocalStorage中存储这个动作。如何解决这个问题?
第二个:复选框语句也不存储在LocalStorage中。如何解决这个问题呢?
下面是代码:http://codepen.io/ovesyan19/pen/chDgy
codepen链接:
http://codepen.io/anon/pen/KLtAs html:<form class="new_item">
<input type="text" class="text_field" name="server_input" id="text_field" placeholder="Write a new task here..." onfocus="this.placeholder = ''" onblur="this.placeholder = 'Write a new task here...'" />
<input type="submit" class="add_btn" value="Add" />
</form>
<div class="items">
<ul id="tasks_list" class="sortable">
</ul>
</div>
jquery: Array.prototype.remByVal = function(val) {
for (var i = 0; i < this.length; i++) {
if (this[i] === val) {
this.splice(i, 1);
i--;
}
}
return this;
};
$(function() {
$(".add_btn").on("click", function() {
var task = $('.text_field').val();
$("#tasks_list").append("<li><input class='tasks' type='checkbox' /><label>" + task + "</label><a href='#'>x</a></li>");
$('.text_field').val('');
/*Random Border Color*/
$('li').each(function() {
var colors = ["#f87c85", "#feb47f", "#3498db", "#b985ea", "#43d6b0"];
var rand = Math.floor(Math.random() * colors.length);
$(this).css("border-right-color", colors[rand]);
});
/*Local Storage*/
if (localStorage.getItem('todoList') !== '' && localStorage.getItem('todoList') !== null) {
var existing = localStorage.getItem('todoList');
var newitem = existing + "," + task;
localStorage.setItem('todoList', newitem);
} else {
localStorage.setItem('todoList', task);
}
});
/*Checkbox*/
$("#tasks_list").on("change", "input:checkbox", function() {
if ($(this).is(":checked")) {
$(this).addClass("done");
$(this).siblings('label').css({
'text-decoration': 'line-through',
'opacity': '0.3'
});
localStorage.setItem($(this).siblings('label').text(), "checked");
}
else {
$(this).removeClass("done");
$(this).siblings('label').css({
'text-decoration': 'none',
'opacity': '1'
});
localStorage.removeItem($(this).siblings('label').text());
}
});
/*Adding New Item*/
$(".new_item").on('submit', function(e) {
//add stuff to database if necessary
e.preventDefault();
return false;
});
/*Removing Task From The List*/
$("#tasks_list").on('click', "a", function() {
var _li = $(this).parent("li");
_li.addClass("remove").stop().slideUp(300, function() {
_li.remove();
});
if (localStorage.getItem('todoList')) {
var items = localStorage.getItem('todoList').split(",");
var replaced = items.remByVal($(this).prev().text()).join();
localStorage.setItem('todoList', replaced);
}
localStorage.removeItem($(this).siblings("label").text());
return false;
});
function loadToDo() {
if (localStorage.getItem('todoList')) {
var items = localStorage.getItem('todoList').split(",");
for (var i = 0; i < items.length; i++) {
if(localStorage.getItem(items[i]) !== null){
$("#tasks_list").append("<li><input class='tasks done' type='checkbox' checked/><label style='text-decoration: line-through; opacity: 0.3;'>" + items[i] + "</label><a href='#'>x</a></li>");
}else{
$("#tasks_list").append("<li><input class='tasks' type='checkbox' /><label>" + items[i] + "</label><a href='#'>x</a></li>");
}
}
}
}
loadToDo();
});
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 如何在ReactJS JSX中执行嵌套的if-else语句
- 将作用域存储在JSON中
- 使用javascript存储变量的最安全方式
- 当图像转换为本地存储的DataURL时,EXIF被删除
- 如何在chrome扩展中存储数据/结果,以及如何使用setTimeout使其只被调用一次
- 自动修复”;语句前缺少分号“;
- 如何有效地将游戏数据存储在URL查询字符串中
- Ember.js-接口状态应该存储在哪里
- 如何解雇“;铁局部存储负载”;事件
- for 循环和 if 语句,获取变量并存储它
- 我把sql语句存储在数据库中的地方,用于blueimp / jQuery-File-Upload
- 提供具有多个参数的存储语句的最佳方法
- 正在尝试准备要存储在数据库中的语句
- ExtJs:等待直到存储加载,然后执行next语句
- 在switch语句的情况下,将if语句中的值存储在变量中
- Jquery中的LocalStorage,复选框语句存储
- 如何将单击的URL存储为变量,以便在if语句中使用
- If语句没有识别存储在变量中的条件
- 若忽略语句,则映射API存储数据函数