LocalStorage仅存储最后输入的数据

时间:2016-09-17 12:20:50

标签: javascript ios cordova local-storage web-inspector

我正在使用LocalStorage在我使用PhoneGap for iOS构建的应用上存储用户名和密码。当我在iPad上运行应用程序并输入用户名和密码时,请关闭应用程序,然后再次打开以输入另一个用户名和密码。当我将iPad连接到我的Macbook并打开Safari Web检查器来检查我在iPad上运行的应用程序时,当我转到"存储 - > localStorage的"在检查员中,只显示最后输入的用户名和密码,但我输入的第一组用户名和密码不在何处。任何人都有任何关于为什么会这样的想法?

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>

我已经尝试在网络检查员周围寻找,但仍无法找到我的第一组存储数据的位置。代码有问题吗?

3 个答案:

答案 0 :(得分:0)

LocalStorage只存储键值对。要存储多个值,请使用解决方法:

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

答案 1 :(得分:0)

试试这个

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")));

答案 2 :(得分:0)

请试试这个

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")));

每次尝试存储用户详细信息时,请获取本地存储,将用户详细信息作为对象推送到阵列中。