LocalStorage only storing last entered data

Question

I am using LocalStorage to store username and password on an app I'm building with PhoneGap for iOS. When I run the app on my iPad, and I enter the username and password, close the app, then open again to enter another username and password. When I connect my iPad with my Macbook and open Safari Web inspector to inspect my app running on the iPad, when I go to "Storage -> localStorage" within the inspector, only the last entered username and password is displayed, but the first set of username and password I entered is no where to be found. Anyone have any ideas as to why this happens?

js:

<script type="text/javascript">
document.addEventListener("deviceready",onDeviceReady,false);

function onDeviceReady() {
document.getElementById("btnSave").addEventListener("click",saveData,false);
document.getElementById("btnGet").addEventListener("click",getData,false);
}

    function saveData(){
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        window.localStorage.setItem("uname", username);
        window.localStorage.setItem("pass", password);
        alert("Your data is stored");
    }
    function getData(){
        var output="Your username is " + window.localStorage.getItem("uname") + "and your password is " + window.localStorage.getItem("pass");
        document.getElementById("result").innerHTML = output;
    }
</script>

html:

    User Name: <input type ="text" id="username" /><br />
    Password: <input type="text" id="password" /><br />
    <button id="btnSave"> Save Data </button>
    <button id="btnGet"> Get Data </button>
    <div id="result"></div>

I've tried looking everywhere around the web inspector but still couldn't find where my first set of stored data went. Is there something wrong with the code?

Answer 1

LocalStorage just stores key value pairs. To store more than one value use a workaround:

str=localStorage.getItem("users");
if(str==""){
str="[]";
}
users=JSON.parse(str);
//users contains an array now
users.push("John");
//add a user
localStorage.setItem("users",JSON.stringify(users));
//create json and store it again

Answer 2

Try this

var localObject = [];
localObject = localStorage.getItem("userDetails");
var testObject = {userName : "firstUser", password : "password1"};
var testArray = localObject.push(testObject);
localStorage.setItem("userDetails", JSON.stringify(testArray));
//to fetch the data
localStorage.getItem("userDetails");
console.log (JSON.parse(localStorage.getItem("userDetails")));

//for second time 
var localObject = localStorage.getItem("userDetails");
var testObject = {userName : "secondUser", password : "password2"};
testArray = localObject.push(testObject);
localStorage.setItem("userDetails", JSON.stringify(testArray));
console.log (JSON.parse(localStorage.getItem("userDetails")));

Answer 3

Please try this

var localObject = [];
var testObject = {userName : "firstUser", password : "password1"};
localObject.push(testObject);
localStorage.setItem("userDetails", JSON.stringify(localObject));
console.log(JSON.parse(localStorage.getItem("userDetails")));

//for second time 
var testObject = {userName : "secondUser", password : "password2"};
localObject.push(testObject);
localStorage.setItem("userDetails", JSON.stringify(localObject));
console.log(JSON.parse(localStorage.getItem("userDetails")));

Every time you try to store the user details, fetch the local storage, push the user details as an object into the array.