HTML5本地存储数据显示

时间:2015-03-06 07:14:01

标签: html cordova local-storage

我正在使用Phonegap中的应用程序...在这个应用程序中我正在本地存储中保存一些值并显示它...例如..当用户输入他的姓名和出生日期时,每个人都是以单独的键值保存。当用户按下一个名为“调用”按钮的按钮时,需要显示所有保存的值。这里我只保存名字,在下一页我正在检索它。问题是当我检索它时,我只得到最后保存的名字。

假设第一个用户输入了一个名字Aaron并保存了值..然后他进入Sandra并保存..然后他进入Dona然后保存...如果检索意味着我只得到价值Dona ..如果我想要显示我需要编程的所有三个值..我正在给出我做的代码。

<button onclick="save_data()" type="button">Save</button>
<input type="submit"  >
<button onclick="recall_data()" type="button">Recall</button>

<script LANGUAGE="JavaScript">
function save_data(){
        var firstn = document.getElementById("fn");

window.localStorage.setItem('First Name', firstn.value);

        }
</script> 

<script LANGUAGE="JavaScript">
function recall_data(){

window.location = "recallpage.html";

        }

在召回页面中,我确实喜欢这个

<body onload="onLoad();">

function onLoad() {
    var text = "";
var section2 = document.getElementById("listing");
     for (i = 0; i < localStorage.length; i++){
     var key = localStorage.key(i);
     var value = localStorage.getItem(key); 


text = localStorage.getItem(key)  + "<br>" ;


    }
   section2.innerHTML += text;
}

2 个答案:

答案 0 :(得分:1)

只需改变一下:

text = localStorage.getItem(key)  + "<br>" ;

对此:

text += localStorage.getItem(key)  + "<br>" ;

您在for循环中不断覆盖text,因此它将结束localStorage中的最后一个值。添加+=会使localStorage中的所有键连接在一起。

另一种解决方案是在for-loop中移动section2.innerHTML += text

 for (i = 0; i < localStorage.length; i++) {
    ...
    text = localStorage.getItem(key)  + "<br>" ;
    section2.innerHTML += text; 
}

答案 1 :(得分:1)

Jocheved你正在做的是window.localStorage.setItem(&#39; First Name&#39;,firstn.value); ..你正在设置具有firstn值的关键FirstName ...并且只能为该键设置一个值..在这种类型的场景中而不是保存在表中的localstorage保存值中的值..所以你可以根据这个值选择每个值表中的名字......

创建表的示例代码

tx.executeSql('DROP TABLE IF EXISTS DEMO');
 tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id INTEGER PRIMARY KEY AUTOINCREMENT, data, data2, data3, data4, data5, data6)');
tx.executeSql('INSERT INTO DEMO (data, data2, data3, data4, data5, data6) VALUES (?,?,?,?,?,?)',[firstn,lastn,dayb,monb,yrb,middlen]);