本地存儲保存相同項目的倍數

Question

我對使用HTML/JavaScript中的存儲設置頗爲陌生。我正在構建一個混合應用程序，該應用程序是一個不使用Phonegap的移動應用程序。我希望用戶輸入記事名稱，然後是記事本身，並且可以通過將它們放入jquery移動列表並將它們放回主屏幕來保存它們。我的問題是，我一次只能保存一張音符。如果我試圖挽救另一個，它只會覆蓋前一個。我將如何去修復它？另外，當我嘗試刷新瀏覽器時，註釋消失。這是正常的嗎？ 請和謝謝。

這裏是保存功能我用：

function storeData() { 
    var i; 
    for (i=0; i<999; i++) { 
    var fname = document.getElementById('fname').value; 
    var wtf = document.getElementById('wtf').value; 

    localStorage.setItem('fname', fname); 
    localStorage.setItem('wtf', wtf); 



} 

    var newEl = "<li><a href='#' id='savedNote'onclick='loadData'></a></li>" 

    document.getElementById("savedNote").innerHTML = localStorage.getItem("fname"); 

    //try to create a new list element in main menu for this item being stored in 
    // and add an onclick load function for that 

};

function loadData() { 
var x; 
for (x=0; x<999; x++) { 

document.getElementById("fname").innerHTML = localStorage.getItem('fname', fnamei); 
document.getElementById("wtf").innerHTML = localStorage.getItem('wtf', wtfi); 


} 

};

Answer 1

存儲數組。

var arrayX = []; 

arrayX.push(valueY); 

localStorage.setItem('localSaveArray', arrayX); 

Answer 2

我不知道你爲什麼要爲你的函數使用循環。 storeData函數對於#fname和#wtf的值看起來是999次，並且將這個999x次保存在localStorage.fname和localStorage.wtf中
這使絕對沒有意義。與你的loadData函數相同的問題。

一個將多個字符串保存到localStorage的好方法是創建一個javascript對象，將其對其進行字符串化，然後將其保存到localStorage。

如果您（重新）加載頁面，則只需從localStorage加載數據。但是，您需要將其保存到localStorage，每次更改內容時，都要確保localStorage中的數據始終保持最新。

要在頁面上顯示和操作，請使用javascript對象。在我的例子「myData」中。如果你改變了一些東西，你更新你的javascript對象，然後將它保存到localStorage。

附註。爲確保用戶不會覆蓋與 相同的名稱，應使用唯一的ID。就像我在時間戳上做的一樣。

var postID = new Date().getTime(); 

這裏有一個小例子來向你展示一種可能的方式。沒有你的html代碼，很難在功能上編碼。

// Creating a object for all Data 
 
var myData = {}; 
 
\t \t \t 
 
// Fill the Object with data if there is something at the LocalStorage 
 
if (localStorage.myData){ 
 
\t loadDataFromLocalStorage(); 
 
} 
 

 
function createNewPost(){ 
 
    
 
    // Create a ID for the Post 
 
    var postID = new Date().getTime(); 
 
\t \t \t \t 
 
    // Create a Object inside the main object, for the new Post 
 
    myData[postID] = {}; 
 
    // Fill the Object with the data 
 
    myData[postID].fname = document.getElementById('fname').value; 
 
    myData[postID].wtf = document.getElementById('wtf').value; 
 
\t \t \t \t 
 
    // Save it to the LocalStorage 
 
    saveDataToLocalStorage(); 
 
\t \t \t \t 
 
    // Display the Listitem. with the right postID 
 

 
} 
 

 
function loadPost (postID){ 
 
\t var singlePost = myData[postID]; 
 
\t \t \t \t 
 
\t // Display it 
 
} 
 
\t \t \t 
 
\t \t \t 
 
// A Helper Function that turns the myData Object into a String and save it to the Localstorage 
 
function saveDataToLocalStorage(){ 
 
\t localStorage.myData = JSON.stringify(myData); 
 
} 
 
\t \t \t 
 
// A Helper Function that turns the string from the LocalStorage into a javascript object 
 
function loadDataFromLocalStorage(){ 
 
\t myData = JSON.parse(localStorage.myData); 
 
}

Answer 3

// Creating a object for all Data 
 
var myData = {}; 
 
\t \t \t 
 
// Fill the Object with data if there is something at the LocalStorage 
 
if (localStorage.myData){ 
 
\t loadDataFromLocalStorage(); 
 
} 
 

 
function createNewPost(){ 
 
    
 
    // Create a ID for the Post 
 
    var postID = new Date().getTime(); 
 
\t \t \t \t 
 
    // Create a Object inside the main object, for the new Post 
 
    myData[postID] = {}; 
 
    // Fill the Object with the data 
 
    myData[postID].fname = document.getElementById('fname').value; 
 
    myData[postID].wtf = document.getElementById('wtf').value; 
 
\t \t \t \t 
 
    // Save it to the LocalStorage 
 
    saveDataToLocalStorage(); 
 
\t \t \t \t 
 
    // Display the Listitem. with the right postID 
 

 
} 
 

 
function loadPost (postID){ 
 
\t var singlePost = myData[postID]; 
 
\t \t \t \t 
 
\t // Display it 
 
} 
 
\t \t \t 
 
\t \t \t 
 
// A Helper Function that turns the myData Object into a String and save it to the Localstorage 
 
function saveDataToLocalStorage(){ 
 
\t localStorage.myData = JSON.stringify(myData); 
 
} 
 
\t \t \t 
 
// A Helper Function that turns the string from the LocalStorage into a javascript object 
 
function loadDataFromLocalStorage(){ 
 
\t myData = JSON.parse(localStorage.myData); 
 
}