本地存储多个值

Question

Alright, so i have textbox where I enter grades, and then they're saved in localstorage and i can see them under my textbox. But if I want to add more text boxes in which i can add more grades, and they will be saved in localstorage but they will be in another array or something how i can do that? I will be grateful for any help.

$(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

You can set dynamic id to your LocalStorage keys which you can relate to your generated TextBoxes

Something like below

localStorage['grade_' + some_id] = value;

Answer 2

You could use the following example:

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