本地存储可保存多个相同项目

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 次，并将这 999 次保存在 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 = {};
			
// Fill the Object with data if there is something at the LocalStorage
if (localStorage.myData){
	loadDataFromLocalStorage();
}

function createNewPost(){
  
  // Create a ID for the Post
  var postID =  new Date().getTime();
				
  // 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;
				
  // Save it to the LocalStorage
  saveDataToLocalStorage();
				
  // Display the Listitem. with the right postID

}

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

Answer 3

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

function createNewPost(){
  
  // Create a ID for the Post
  var postID =  new Date().getTime();
				
  // 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;
				
  // Save it to the LocalStorage
  saveDataToLocalStorage();
				
  // Display the Listitem. with the right postID

}

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