NavigationCacheMode in HTML5/JavaScript?

Question

In XAML, there is NavigationCacheMode property to cache previous page mentioned in Quickstart: Navigating between pages

Is there similar function in HTML5/JavaScript?

Or, how to implement this feature in JavaScript project to keep previous page for navigation?

Thanks!

Answer 1

There is no equivalent to this in JavaScript.  You want to set the page variables back to the former value in the ready function of the page control:

        ready: function (element, options) {
            // TODO: Initialize the page here.

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Ouch!! This is a serious limitation :-(  On my homepage I have several controls. User not only enters/changes values of those controls but due to the user-actions, some animations are run and the CSS values of those controls also change. When the user navigates to the next page and then clicks the "back" button on that page to come back to the homepage, everything is lost, as if he has just opened the app!!! To manually reinstate all the values (html and css) is a tedious job :-( 

WE MUST HAVE "NavigationCacheMode" PROPERTY IN JAVASCRIPT.

Has anybody found any workaround?

---

DK

Answer 3

Remember that page controls are really a helper for a common pattern of page navigation. There is nothing in the platform that requires you to use them. To be more specific, during the development of Windows 8, we found that people were doing lots of dynamic fragment loading and DOM replacement, as you'd do with an AJAX-based website. So the WinJS team made some helpers in the page control mechanism. But again, they're just helpers.

With that in mind, you're free to use any other strategy to give the appearance of navigation without using page controls, which, as you have found, will unload the DOM for a page once you navigate away.

So instead, overlay a div with your second page on top of the first page, without tearing down the first one. Visually, it will look like you're navigating, but in code you're keeping the entire DOM of the first page in memory with the second page obscuring it. When you "navigate" back, you simply hide or unload the second page's div, and you're back to the first page.

Many apps use this strategy, because the user can't tell the difference. It works especially great for going between a master list that took a while to populate and render, and a details page. The details page comes up just overlaying the master page, so that then it's removed or hidden, that master page is already built and just has to render the visible portions. This kind of thing works just as well for controls that are populated on your home page.

Kraig

Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press

Answer 4

With light pages, I saved all modified states as options to navigation history in unload() function and restore them in ready() function when navigating back.

With heavy pages that took a while to populate and render, I show/hide them as Kraig Brockschmidt mentioned.

Answer 5

Thanks for the detailed explanation, Kraig.

I used that technique (of putting everything on one page and selectively showing/hiding various pieces) in the early days of WPF/XAML (in 2007). I thought that Win8/VS12 would provide some improved developer-experience (in JavaScript). Particularly, when NavitgationCacheMode is already available for XAML developers. I guess, I'll have to stick with my old style (as you suggest.)

So, the next question is how can I handle the Back button that is provided by the Navigation system. Since there will be only one page, what will that button do? Or, should I create my own Back button?

---

DK