HTML5本地存储数据展示

Question

我正在使用 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;
}

Answer 1

只需更改此：

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

为此：

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

您不断地在 for 循环中覆盖 text，因此它最终将成为 localStorage 中的最后一个值。添加 += 将使 localStorage 中的所有键连接在一起。

另一种解决方案是将 section2.innerHTML += text 移动到 for 循环中：

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

Answer 2

Jocheved 你正在做的是 window.localStorage.setItem('First Name', firstn.value); .. 您正在使用 firstn 值设置键 FirstName... 并且只能为该键设置一个值.. 在这种情况下，而不是将值保存在本地存储中，将值保存在 table.. 所以你可以 select 每个值根据来自 table...

的名称

用于创建 table

的示例代码

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]);

HTML5本地存储数据展示

HTML5 Local Storage Data Display

html

local-storage

cordova