1

晚上好，我是一名业余程序员，正在尝试制作简单的 jqm 网络应用程序。我已经制作了一个完整的 CRUD 并将其保存到本地存储中。现在我遇到的问题是显示它。我希望它显示在我的主页上；在 下，单击保存按钮时。但是我该怎么做呢？我被困住了。

<!--Home page-->
 <section data-role="page" id="home">
    <header data-role="header">
        <h1>Counter</h1>
    </header>

    <section>   
    </section>

    <footer data-role="footer" data-position="fixed">
        <nav data-role="navbar">
            <ul>
                <li><a href="#home"></a></li>
                <li><a href="#display"></a></li>
                <li><a href="#app"></a></li>
            </ul>
        </nav>
    </footer>
</section>

继承人的js。

  //Store data function
     var storeData = function(key){
 var id = Math.floor(Math.random()*10000001);

    var item= {};
        item.Name=      ["Name:", $("#name").val()];
        item.category=      ["Type:", $("#category").val()];
        item.fav=   ["Favorite:", $("#fav").val()];
        item.comments=      ["Comments:", $("#comments").val()];
        localStorage.setItem(id, JSON.stringify(item));
        alert("Saved!");
        $.mobile.changePage("#add");

};

4

2 回答 2

0

You can access your storage data with window.localStorage['key']. For example, if you saved name, birthday and gender to your locale storage you can retrieve them with:

var name = window.localStorage['name'];
var birthday = window.localStorage['birthday'];
var gender = window.localStorage['gender'];

Then you can use Javascript to load them into your elements:

document.getElementById('name-div').innerText = name
...

Of course that is assuming you have the proper HTML divs in place:

<div id="name-div"></div>

and so on. Is that what you're looking for?

于 2013-05-02T18:13:11.047 回答
0

好的，首先，'id' 是一个随机生成的数字 - 你以后如何引用它？

要解决此问题，请更改var id = Math.floor(Math.random()*10000001); 到var id = "我的表单数据";

现在您可以在以后的代码中使用var data = localStorage.getItem("my-form-data");检索它。

也<section></section>改成

<content>
    <div id="form-data"></div>
</content>

其次，你说你想在你的主页上看到这些数据。所以改变$.mobile.changePage("#add"); 到$.mobile.changePage("#home");

第三，您希望主页在每次显示页面时从本地存储中检索您保存的表单数据。为此，您需要挂钩到 pagebeforeshow 或 pageshow 事件，如下所示：

$(document).ready(function() {
    $("#home").on("pageshow", function() {
        var data = localStorage.getItem("my-form-data");
        #("#form-data").text(data);
    });
});

这将使您朝着前进的方向前进（我尽量保持简单，以便您可以跟随）。你会注意到我没有对数据进行“去字符串化”，我将把它留给你。

旁注：不要使用 document.ready() 来显示数据。是的，只要#home是您的 html 文件中的第一个（或唯一一个）页面，它就可以工作。但这是一个坏习惯。相反，在mobileinit()事件之前尽早绑定#home pageshow事件（准备好 jqm 文档；事件部分）。

希望这会有所帮助。

干杯，马克

于 2013-12-11T07:20:00.600 回答