Question

这是两个问题：第一个：当我在LocalStorage中将数据添加到我的列表中时，它将其保存并且没有问题，但是当我删除数据时，它不会将此操作存储在LocalStorage中。如何解决？

第二个：复选框语句也根本不存储在LocalStorage中。怎么解决呢？

以下代码如下： http://codepen.io/ovesyan19/pen/chDgy

Answer 1

codepen链接：

<强> 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();
});

Jquery中的LocalStorage，复选框语句存储

1 个答案: