Не удается сохранить todos для локального хранилища

Я изучаю JavaScript прямо сейчас, и одно из практических приложений, которое я делаю, - это сделать список дел, чтобы изучить основы. Сейчас я с трудом сохраняю свои данные на локальном хранилище. Я просматриваю консоль и локальное хранилище своего браузера и вижу только, что создается ключ «todos», но в нем нет значений.Не удается сохранить 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>

источник

2016-10-26 OrangePineapple

Ну, вы вызываете 'clearInput()' прямо перед сохранением значения ввода так ... – JJJ

OMG THANK YOU !. hahah – OrangePineapple

Вы вызываете свою собственную функцию clearInput() перед вызовом saveTodos(). Это означает, что вы сначала очистите поле ввода, а затем сохраните значение поля ввода (теперь пустого) в локальное хранилище.

Следовательно, вы всегда будете иметь ключ «todos» с пустой строкой в качестве значения.

Чтобы сохранить свой последний введенный ввод в нужной переменной localStorage, вам просто нужно переместить вызов saveTodos() перед вызовом clearInput().

Однако ваш случай использования предполагает, что вы наверняка хотите сохранить больше, чем только последний введенный ввод, но несколько todos. Для этого вам придется либо использовать отдельный ключ для каждой записи, либо историю всех записей в виде массива. Поскольку LocalStorage поддерживает только значения String, вам нужно будет использовать что-то вроде JSON.stringify

источник

2016-10-26 07:37:55 glutengo

yes.I изменил его и теперь он сохраняет значение. Но вы правы, он хранит только одно значение за раз. как я могу хранить несколько todos? – OrangePineapple

Есть два способа сделать это: 1) использовать уникальный ключ для каждой записи. Толо + временная метка была бы возможна, использование счетчика было бы другим. 2) хранить стробированный объект вместо простой строки. У вас было бы что-то вроде var todosObj = {todos: ["ходить по магазинам", "call theunt nana"]}. Когда вы его сохраните, вы сделаете так: localStorage.setItem («todos», JSON.stringify (todosObj)). Когда вы загружаете страницу, вам нужно будет преобразовать String обратно в объект следующим образом: var todosObj = JSON.parse (localStorage.getItem («todos»)) – glutengo

Возможно закомментировав clearInput(); перед вызовом saveTodos(); решит вашу проблему. :)

источник

2016-10-26 07:33:02 Barak

hahahahahaha .... все еще изучая парней ... СПАСИБО ВАМ OMG. – OrangePineapple

Не удается сохранить todos для локального хранилища

ответ

Смежные вопросы