LocalStorage和向列表中添加li

LocalStorage and adding li to list

本文关键字：添加 li 列表 LocalStorage      更新时间：2023-09-26

我想做一个小脚本，允许一个小笔记部分。该部分将有一个输入框，允许向列表中添加元素;这将被保存在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，但这让我有点困惑。然而，只有"Notes"在顶部加载，有什么想法吗?

你的方法太离谱了。你根本不需要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>

这就是我使用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

相关文章：