Multiple values in lawnchair

I'm using Lawnchair, and I've managed to store a value locally. Something like this:

var Users = new Lawnchair({table:'Users', adaptor:'dom'});


function save_prompt()
{
    var UserName = prompt("Your Username","John Doe");
    if (UserName!=null && UserName!="")
    {
        Users.save
        ({key:'UserData', SavedUserName:UserName});
    }
}

function recall_prompt() 
{
    Users.get
    ('UserData',function(r)
        {
            document.getElementById('Message').innerHTML = r.SavedUserName;
        }
    );  
}

I call both functions save_prompt & recall_prompt using buttons binded with onclick.

Basically this script will pop up a textfield to enter your username (John Doe is default) and saves it开发者_如何学JAVA.

With recall_prompt, it worked fine by showing the saved username in the html div id="Message".

My question is, how to save a second, third, and beyond usernames? And how to retrieve them all to show in the html div? I've tried numerous methods that can be found on the 'net but I just can't get it to work. It seems the new username always overwrites the old ones.

Lawnchair saves data as Key:value pairs. So if u save another username with the same key, (UserData), it'll always get overridden. To save more usernames u'll have to change the keys. Make it UserData_1, UserData_2, like that.

Or you could store an array of usernames with the key 'UserData', so each time u need to save a username, get the array from DB, then add the new username to it and resave it.