Navigating through multimedia content - Build Windows 8 Apps with HTML5 and JavaScript - page 160

Now try hitting the Back button. Quite surprisingly, you are not returned to the photo where you
navigated from. You are, instead, returned to the first photo of the flip view. To complete this part of
the exercise, therefore, you have two more steps to accomplish: find a way to persist the index of the
last photo visited in the flip view and give a richer template to the detail page.

persisting information across page navigation
When you navigate from one page to the next, the context of the application changes and existing
controls are dismissed. The flip view is then dismissed when you jump to the detail page, and it is
re-created when you return to the home page. The index of the photo that was visible at the moment
of navigation is just lost. To fix things, you need to accomplish three steps:

Store the index of the currently visible item in some store that survives the change of page.

1.

2. Instruct the flip view to accept an extra parameter that indicates the starting item.

3. Retrieve the last-visited index from the store and pass it to the flip view; if no index can be
found, then tell the flip view to start from the first item in the bound list of items.

For the first step, you go back to home.js and add a line to the unload event handler.

(function () {
"use strict";

WinJS.UI.Pages.define("/pages/home/home.html", {
ready: function (element, options) {
GalleryApp.init();
},
unload: function () {
WinJS.Application.sessionState.currentPhotoIndex = GalleryApp.
getCurrentPhotoIndex();
}
});
})();

The unload event handler responds to navigations away from the page. From within this
event handler, you can save the index of the current photo to the application's session state. The
sessionState property of the WinJS.Application object is the system-provided container where
developers should save any information that may be used to restore the application's state after the
application has been suspended and then resumed. The sessionState object is a plain dictionary and
can be shaped up at will. In other words, if you need to add a custom property to the sessionState
object, you just add it and go—as you did with currentPhotoIndex in the preceding code snippet.

In this case, the application is not going to be suspended—the application is simply navigating to
another page—but the sessionState is still working and, better yet, you end up having a flip view that
can display its original state also when resumed from suspension.