storing a variable in localStorage is too slow

Question

I have two jQuery mobile pages (#list and #show). There are several items on the #list page with different IDs. If I click on item no.5, the ID no5 will be stored in localSt

Answer 1

I encountered this problem too (and not on a mobile : on Chromium/linux).

As there doesn't seem to be a callback based API, I "fixed" it with a timeout which "prevents" the page to be closed before the setItem action is done :

localStorage.setItem(name, value);                           
setTimeout(function(){
     // change location
}, 50);

A timeout of 0 might be enough but as I didn't find any specification (it's probably in the realm of bugs) and the problem isn't consistently reproduced I didn't take any chance. If you want you might test in a loop :

function setLocalStorageAndLeave(name, value, newLocation){
    value = value.toString(); // to prevent infinite loops
    localStorage.setItem(name, value);
    (function one(){
         if (localStorage.getItem(name) === value) {
            window.location = newLocation;
         } else {
            setTimeout(one, 30);
         }
    })();
}

But I don't see how the fact that localStorage.getItem returns the right value would guarantee it's really written in a permanent way as there's no specification of the interruptable behavior, I don't know if the following part of the spec can be legitimately interpreted as meaning the browser is allowed to forget about dumping on disk when it leaves the page :

This specification does not require that the above methods wait until the data has been physically written to disk. Only consistency in what different scripts accessing the same underlying list of key/value pairs see is required.

In your precise case, a solution might be to simply scroll to the element with that given name to avoid changing page.

Note on the presumed bug :

I didn't find nor fill any bug report as I find it hard to reproduce. In the cases I observed on Chromium/linux it happened with the delete operation.

Answer 2

Disclaimer: This solution isn't official and only tested for demo, not for production.

You can pass data between pages using $.mobile.changePage("target", { data: "anything" });. However, it only works when target is a URL (aka single page model).

Nevertheless, you still can pass data between pages - even if you're using Multi-page model - but you need to retrieve it manually.

When page is changed, it goes through several stages, one of them is pagebeforechange. That event carries two objects event and data. The latter object holds all details related to the page you're moving from and the page you're going to.

Since $.mobile.changePage() would ignore passed parameters on Multi-page model, you need to push your own property into data.options object through $.mobile.changePage("#", { options }) and then retrieve it when pagebeforechange is triggered. This way you won't need localstorage nor will you need callbacks or setTimeout.

1. Step one:

   Pass data upon changing page. Use a unique property in order not to conflict with jQM ones. I have used stuff.

   /* jQM <= v1.3.2 */
   $.mobile.changePage("#page", { stuff: "id-123" });
   
   /* jQM >= v1.4.0 */
   $.mobile.pageContainer.pagecontainer("change", "#page", { stuff: "id-123" });
   

2. Step two:

   Retrieve data when pagebeforechange is triggered on the page you're moving to, in your case #show.

   $(document).on("pagebeforechange", function (event, data) {
   
     /* check if page to be shown is #show */
     if (data.toPage[0].id == "show") {
   
       /* retrieve .stuff from data.options object */
       var stuff = data.options.stuff;
   
       /* returns id-123 */
       console.log(stuff);
     }
   });
   

Demo