javascript - 如何使用 JavaScript 通过字典在本地存储中输入多个值？

Question

在我的代码中，我将更新一个值，但不会存储新值。假设我必须按以下格式输入一些值:

{
   firstname:'kuldeep', 
   lastname:- 'patel'
}

然后在输入值后，更新值。该值存储在 localStorage 中。但是我想添加一些不同的值，如下所示:

{
   firstname: 'kuldeep',
   lastname: 'patel', 
   firstname:'abc', 
   lastname:'xyz',    
   firstname:'parth', 
   lastname:'pandy'
}

这是我获取上述输入的代码:

$(document).ready(function(){
    $('.save').on('click',function(e){
        e.preventDefault();

        var data = {
            "Firstname": $('#name').val(),
            "Lastname": $('#lastname').val()
        };

        var saveData = JSON.stringify(data);

        if( typeof(Storage) !== undefined ){
            localStorage.setItem("savedItem", saveData );
            document.write(savedItem);
        } else {
            alert('Storage is not available in your browser!');
            return false;
        }

    });

Answer 1

你可以像这样使用数组:

$('.save').on('click', function(e) {
    if (!localStorage)
        return alert('Storage is not available in your browser!');

    const savedItem = ((savedItem) => {
        try {
            return (savedItem) ? JSON.parse(savedItem) : [];
        } catch (e) { return []; }
        if (!a instanceof Array)
             return [];
    })(localStorage.savedItem);

    const data = {
        "Firstname": $('#name').val(),
        "Lastname": $('#lastname').val()
    };

    savedItem.push(data);

    localStorage.savedItem = JSON.stringify(savedItem);

    console.log(localStorage.savedItem);

    e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" />
<input id="lastname" />


<input class="save" type="button" value="save" />

输出(对象):

[{
   firstname: 'kuldeep',
   lastname: 'patel',
}, { 
   firstname:'abc', 
   lastname:'xyz',
}, {
   firstname:'parth', 
   lastname:'pandy'
}]