如何在不使用窗口对象的情况下在jquery移动页面之间共享json数据

时间:2014-02-11 09:47:14

标签: javascript jquery json jquery-mobile jquery-mobile-listview

“pageinit”事件的index.html页面中,我将从后端获取所有员工详细信息。

获取员工数据后,我将其存储在“employees”变量中以供将来访问。

示例代码如下所示:

var employees;
var url = "/employee-jquerymobile/services/";

$("#employeeListPage").bind('pageinit', function() {
    var method = url + "getemployees.php";
    $.getJSON(method,  function(data) {
        var i, emp;
        employees = data.items;     
        var $employeeListView = $("#employeeListView");
        $employeeListView.find("li").remove();      

        for (i=0; i<employees.length; i++) {
            emp = employees[i];         
            $employeeListView.append(
                "<li><a data-transition='slide' href='employeedetails.html?id=" +  emp.id +  "'>" + emp.firstName + "</a></li>"
            );      
        }

        $employeeListView.listview("refresh");

    });
});

我还有一个名为“employeedetails.html”的view / html文件,我希望在其中显示受尊敬的用户信息。

employeedetails.html的示例代码如下:

<div id="detailsPage" data-role="page" data-add-back-btn="true">

    <div data-role="header">
        <h1>Employee Details</h1>
    </div>

    <div data-role="content"> 
        <img id="employeePic"/>
        <div id="employeeDetails">
        <h3 id="fullName"></h3>
        <p id="employeeTitle"></p>
        <p id="city"></p>
    </div>

</div>

在“employeedetails.html”中,我无法访问以前存储的“employees”变量。我检查了控制台,它给出了“未定义”。

我搜索了互联网并发现,很少有人通过使用员工ID建议,我再次调用后端服务并获取员工数据。

更新: 我能够访问变量,如果我使用window对象将其设置为globlal。但它是推荐的数据公开方式。有没有其他方法可以在jQuery Mobile中的页面或视图之间共享数据。最后一个选项是本地存储/会话存储,但还有其他选项

我尝试了很多但失败了。任何帮助将不胜感激,在此先感谢。

1 个答案:

答案 0 :(得分:1)

使用sessionStorage:

...
$.getJSON(method,  function(data) {
    var i, emp;
    sessionStorage.employees = JSON.stringify(data.items);
...

然后您可以使用以下方式获取此数据:

var employees=JSON.parse(sessionStorage.employees);

修改 要在浏览器中检查“sessionStorage”的可用性:

if (window.sessionStorage){
    ... //do whatever
}