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

我不确定你为什么要为你的功能使用循环。 storeData函数对#fname和#wtf的值看起来是999次，并在localStorage.fname和localStorage.wtf中保存这999倍。这使绝对没有意义。 loadData函数也有同样的问题。

将多个字符串保存到localStorage的一种好方法是创建一个javascript对象，对其进行字符串化然后将其保存到localStorage。

如果您（重新）加载页面，您只需要从localStorage加载数据。但是每次更改时都需要将它保存到localStorage，以确保localStorage中的数据始终是最新的。

对于页面上的显示和操作，您使用javascript对象。在我的例子“myData”中。如果您更改了某些内容，则更新您的javascript对象，然后将其保存到localStorage。

旁注。确保用户不会用a覆盖某些内容相同的名称，您应该使用唯一的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 2

＆＃13;

// 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);
}

＆＃13;

Answer 3

存储数组。

var arrayX = [];

arrayX.push(valueY);

localStorage.setItem('localSaveArray', arrayX);

本地存储可以节省相同项目的倍数

3 个答案: