ローカルストレージ複数の値

Question

申し訳ありませんので、私はグレードを入力するテキストボックスを持っているし、それらはlocalstorageに保存され、私はテキストボックスの下にそれらを見ることができます。しかし、もし私がより多くの成績を加えることができるテキストボックスを追加したいのであれば、それらはlocalstorageに保存されますが、別の配列か何かでそれを行うことができますか？私はどんな助けにも感謝します。

$(document).ready(function() { 
    var i = 0; 
    for (i = 0; i < localStorage.length; i++) { 
     var gradeID = "grade-" + i; 
     $('#gradeList').append("<b id='" + gradeID + "'>" + localStorage.getItem(gradeID) + "</b>, "); 
    } 

    $('#clear').click(function() { 
     localStorage.clear(); 
    }); 

    $('#gradeEntryForm').submit(function() { 
     if ($('#gradeInput').val() !== "") { 
      var gradeID = "grade-" + i; 
      var gradeMessage = $('#gradeInput').val(); 
      localStorage.setItem(gradeID, gradeMessage); 
      $('#gradeList').append("<b class='task' id='" + gradeID + "'>" + gradeMessage + "</b>, "); 
      var grade = $('#' + gradeID); 
      task.slideDown(); 
      $('#gradeInput').val(""); 
      i++; 
     } 
     return false; 
    }); 

    $('#gradeList').on("click", "b", function (event) { 
     self = $(this); 
     gradeID = self.attr('id'); 
     localStorage.removeItem(gradeID); 
     self.remove(); 

    }); 


}); 

DEMO

Answer 1

あなたは、あなたの生成のTextBoxに関連することができ、あなたのlocalStorageキーあなたは、次の例を使用することができ

localStorage['grade_' + some_id] = value; 

Answer 2

以下のような

何かに動的なIDを設定することができます。

document.getElementById("addGrade").onclick = function() { var gradeCell = document.getElementById("gradeCell"); var input = document.createElement("input"); input.type = "number"; var br = document.createElement("br"); gradeCell.appendChild(input); gradeCell.appendChild(br); }

EXAMPLE