我在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);
}
};
答案 0 :(得分: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);
}
答案 1 :(得分:1)
// 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;
答案 2 :(得分:0)
存储数组。
var arrayX = [];
arrayX.push(valueY);
localStorage.setItem('localSaveArray', arrayX);