LocalStorage只存儲最後輸入的數據

我正在使用LocalStorage在我使用PhoneGap for iOS構建的應用程序上存儲用戶名和密碼。當我在iPad上運行應用程序時，輸入用戶名和密碼，關閉應用程序，然後再次打開以輸入其他用戶名和密碼。當我將iPad連接到Macbook並打開Safari Web檢查器檢查在iPad上運行的應用程序時，當我在檢查器中轉到「Storage - > localStorage」時，僅顯示最後輸入的用戶名和密碼，但第一組我輸入的用戶名和密碼無法找到。任何人有任何想法，爲什麼會發生這種情況？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>

我試着到處尋找周圍的網絡檢查，但還是沒找到哪裏我的第一套存儲的數據的去了。代碼有問題嗎？

來源

2016-09-17 michelle9090

LocalStorage存儲唯一的鍵值對，如果你setItem的前一個項目被覆蓋 –

你所做的事情是錯誤的是存儲在localstorage的用戶名和密碼，有辦法可以克服這個覆蓋'bug'，但告訴我你將如何驗證這些用戶？ – Zeeshan

我只是使用用戶名作爲練習，我想存儲的實際上是按鈕點擊，但我在網上找到的例子是基於用戶名的，所以我想我會看看它是否有效，然後我可以將它集成到按鈕點擊中。 – michelle9090

請試試這個

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

試圖存儲用戶的細節時，都會獲取本地存儲，將用戶詳細信息作爲對象推送到數組中。

來源

2016-09-17 13:14:36

爲什麼你發佈兩個答案？ – vlaz

謝謝，但它仍然覆蓋用戶名。我現在只專注於保存用戶名，如果它的工作，我可以然後集成到密碼等我的代碼：var localObject = []; var username = document.getElementById（「username」）.value; localObject.push（username）; window.localStorage.setItem（「uname」，JSON.stringify（username））; console.log（JSON.parse（localStorage.getItem（「uname」）））; 警報（「您的數據已存儲」）; – michelle9090

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

來源

2016-09-17 12:46:04

謝謝。我將我的代碼更改爲：function saveData（）{ var username = document.getElementById（「username」）.value; var password = document.getElementById（「password」）.value; var date = new Date（）; window.localStorage.setItem（「date」，JSON.stringify（date））; window.localStorage.setItem（「uname」，JSON.stringify（username））; window.localStorage.setItem（「pass」，JSON.stringify（password））; 警報（「您的數據已存儲」）; }但它仍然覆蓋在網絡檢查員查看的值 – michelle9090

@ michelle9090：再次閱讀我的答案... –

試試這個

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

來源

2016-09-17 13:05:46

LocalStorage只存儲最後輸入的數據

回答

相關問題