Question

我正在尝试创建一个允许一个小注释部分的小脚本。此部分将有一个输入框，允许向列表中添加元素;这将保存在localStorage中，以便在刷新或关闭浏览器时它们不会丢失。我的代码如下（它通过JS甚至html完成，但忽略它。）

var notes = [];
var listthings = "<h2 id=\"titlething\">Notes</h2>" +
                 "<ul id=\"listing\">" +
                 "</ul>"
                 "<input type=\"text\" name=\"item\" id=\"textfield\">" +
                 "<input type=\"submit\" id=\"submitthing\" value=\"Submit\">";

JSON.parse(localStorage.getItem('notes')) || [].forEach( function (note) { 
    "<li id=\"listitem\">" + notes + "</li>";
    })

 $('#submitthing').click(function() {
     notes.push($('#textfield').val());
    });

localStorage.setItem('notes', JSON.stringify(notes));

另外，我如何在开始和结束标签之间添加最新添加的li？显然我通常使用jQuery来做，但这让我感到困惑。但是，只有“注释”加载在顶部，任何想法？

Answer 1

你的做法不合时宜。您根本不需要JSON（这只会让事情变得混乱），您无需手动创建HTML。

此外，您可以使用数组来存储注释，但由于localStorage是存储区域，因此数组是多余的。此外，不使用数组，您不需要JSON。整个问题变得更容易解决。

不幸的是，由于安全问题，以下内容不会在此代码段编辑器中运行，但它会按照您的要求执行。这个小提琴表明它有效：https://jsfiddle.net/Lqjwbn1r/14/

// Upon the page being ready:
window.addEventListener("DOMContentLoaded", function(){

   // Get a reference to the empty <ul> element on the page
   var list = document.getElementById("notes");

   // Loop through localStorage
   for (var i = 0; i < localStorage.length; i++){

     // Make sure that we only read the notes from local storage
     if(localStorage.key(i).indexOf("note") !== -1){
      // For each item, create a new <li> element
       var item = document.createElement("li");
       // Populate the <li> with the contents of the current 
       // localStorage item's value
       item.textContent = localStorage.getItem(localStorage.key(i));
       // Append the <li> to the page's <ul>
       list.appendChild(item);
     }
   }

   // Get references to the button and input
   var btn = document.getElementById("btnSave");
   var note = document.getElementById("txtNote");

   // Store a note count:
   var noteCount = 1;

   // When the button is clicked...
   btn.addEventListener("click", function(){
     // Get the value of the input
     var noteVal = note.value;

     // As long as the value isn't an empty string...
     if(noteVal.trim() !== ""){

       // Create the note in localStorage using the 
       // note counter so that each stored item gets
       // a unique key
       localStorage.setItem("note" + noteCount, noteVal);

       // Create a new <li>
       var lstItem = document.createElement("li");
       // Set the content of the <li>
       lstItem.textContent = noteVal;
       // Append the <li> to the <ul>
       list.appendChild(lstItem);
       // Bump up the note counter
       noteCount++;
     }
   });

});

<input type=text id=txtNote><input type=button value=Save id=btnSave>
<ul id=notes></ul>

Answer 2

这是我使用jquery接近它的方法。但取决于这应该是多么复杂。这只是一个简单的演示。

<input type="text" id="note" />
<button id="add">add note</button>

<ul id="notes"></ul>

javascript和jquery

function addNote(){
  var data = localStorage.getItem("notes")
  var notes = null;
  if(data != null)
  {
    notes = JSON.parse(data);
  }
  if(notes == null){
    notes = [];
  }
  notes.push($("#note").val());
  localStorage.setItem("notes", JSON.stringify(notes));
  refreshNotes();
}
function refreshNotes(){
  var notesElement =$("#notes");
  notesElement.empty();
  var notes = JSON.parse(localStorage.getItem("notes"));
  for(var i = 0; i< notes.length; i++){
    var note = notes[i];
    notesElement.append("<li>"+note+"</li>");
  }
}

$(function(){
  refreshNotes();

  $("#add").click(function(){
    addNote();
  });
})

例如： http://codepen.io/xszaboj/pen/dOXEey?editors=1010

LocalStorage并将li添加到列表中

2 个答案: