localStorage обновляется. Как запретить

#javascript #массивы #localstorage

if (localStorage.getItem('todo')!=undefined){    
        var tasks = [];
        tasks = JSON.parse(localStorage.getItem('todo'));
        for (var key in tasks) {
            $('#list').append("
" + tasks[key] + "
");
        }
    }

        function SaveTask(){
            var tasks = [];
            $('li.task').each(function(i, el){
                var val = $(el).text();                         
                    tasks.push(val);                        
            }); 
            console.log(tasks); 
            localStorage.setItem('todo', JSON.stringify(tasks));

        }

        function AddTask(){
            var val = $('#new-todo').val();
            var del = $('').text('×');
            var li = $('
').html(val).append(del);
            if (val) {
                li.appendTo($('#list'));
                $('#new-todo').val('');                                 
            }

            del.click(function () {
                li.remove();                
            });
        }   

        $('#btn-enter').click(function () {
            AddTask();
            SaveTask();
        });


При перезагрузке страницы отображаются только последнедобавленные, вместо всех. Если
var tasks = []; сделать глобальной, идет некорректное сохранение в массив. 
Тут 2 варианта - скорректировать  SaveTask() или localStorage. Рассмотрю все...
http://jsfiddle.net/Nata_Hamster/6vhas75k/
    

Ответы

Ответ 1

Вы при сохранении делаете выборку по li.task в то время, как класс task добавляете
только новым записям, поэтому старые записи не входят в выборку для сохранения.

Не меняя оформление страницы можно сделать выборку #list > li - в нее входят и старые
и новые записи.  

Такой селектор css читается как "выбрать все элементы li - прямые потомки элемента
с id list"  

http://jsfiddle.net/6vhas75k/2/