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

Question

In index.html page on "pageinit" event, I am getting all the employees details from the back end.

Once I fetch the employees data, I am storing it in "employees" variable for future access.

The sample code looks like this:

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

    });
});

I have one more view / html file called "employeedetails.html", where I want to show the respected user information.

The sample code for employeedetails.html is as below:

<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>

In "employeedetails.html", I am unable to access the previously stored "employees" variable. I checked in console and it gives "undefined".

I have searched the internet and found, few guyz suggested by using the employee id, I call the back end service again and fetch the employee data.

Update: I am able to access the variable, if I make it globlal using window object. But is it the recommended way to make the data public. Is there any other way to share the data between pages or views in jQuery Mobile. One last option is local storage / session storage, but are there any other options

I tried a lot but failed. Any help would be greatly appreciated, Thanks in Advance.

Answer 1

Use sessionStorage:

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

Then you could get this data back using:

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

EDIT: To check the availability of "sessionStorage" in the browser:

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