Question

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

<!--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");

};

Answer 1

您可以使用window.localStorage['key']访问您的存储数据。例如，如果您将名称，生日和性别保存到语言环境存储，则可以使用以下命令检索它们：

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

然后您可以使用Javascript将它们加载到您的元素中：

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

当然，假设你有适当的HTML div：

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

等等。这就是你要找的东西吗？

Answer 2

$(document).ready(function() {   
$("#button_id").click(function() { 
alert(localStorage.getItem('local_key');) #local_key i have at the time of storing data into local storage using localStorage.setItem

})
})

Answer 3

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

要解决此问题，请将 var id = Math.floor（Math.random（）* 10000001）; 更改为 var id =“my-form-data”;

现在，您可以使用 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 docs; events部分）。

希望这有所帮助。

干杯，标记

如何在单击按钮时显示已保存的localStorage数据？

3 个答案: