Title: Retrieving value from HTML5 local storage
Tags: javascript;html;jquery-mobile;local-storage
Question: I have multiple JQM pages and in need to retrieve the active page ID i already stored and add it as a link to a button on the first page.

I am trying to achieve a "continue" function that allows you to not lose your progress.

In the example below I managed to store the active page ID and whenever the page is refreshed you will get an alert with the last page ID stored (first time it will alert #null cause no id is stored at the time).

It's basically ok but i can't seem to make that ID as the button link even though I tried ```$("#resume").attr("href", resume);```

I am storing the ID with this button : 

```<a href="#" data-role="button" onclick='storageValue();'&gt;Store</a&gt;
```

And this is the function I have so far:

```    function storageValue() {
    var stored = $.mobile.pageContainer.pagecontainer("getActivePage").attr('id');
    alert("Your stored id is: " + stored);

    localStorage.setItem('stored', stored);
    checkLocalStorage();


}
var test = localStorage.getItem('stored');
var resume = "#" + test;
alert("Your stored id is: " + resume);

checkLocalStorage();
```

Optional: It would have been ideal if I didn't need to click a button to store the page. The page should be stored automatically when becoming active.

Here is a JSFIDDLE that will allow you to test/debug faster.

PS: I don't think it's of any relevance to this but I am going to turn this into an android app using XDK.

Comment: @fuzzybabybunny well, thanks for the opinion but I see no use in using a plugin for something this simple..

Comment: @fuzzybabybunny well, yes but I am building this into an android app. Therefore I won't use it on a mobile orientated website :)

Comment: I would look into using Amplify.store for your LocalStorage needs: http://amplifyjs.com/api/store/

Comment: Different browsers use different apis for their local storage. It's nice to use one code base that takes care of all the differences for you, otherwise you could be typing lots of different versions of the same code for different browsers.

Here is the accepted answer: It's more practical to use pagecontainer events to store data. In your case, use ```pagecontainerhide``` to store ID of page you're navigating to ```toPage```. And then, use ```pagecontainershow``` to update button's ```href```.

In case stored ID is equal to first page's ID, the button will be hidden.

```$(document).on("pagecontainerhide", function (e, data) {
    var stored = data.toPage.attr('id');
    localStorage.setItem('stored', stored);
}).on("pagecontainershow", function (e, data) {
    if (data.toPage[0].id == "firstpage") {
        var test = localStorage.getItem('stored');
        var resume = "#" + test;
        $("#resume").attr("href", resume);
        if (test == "firstpage") {
            $("#resume").fadeOut();
        } else {
            $("#resume").fadeIn();
        }
    }
});
```

```
  Demo
```

If you want to navigate directly to last visited page, listen to ```pagecontainerbeforechange``` and alter ```toPage``` object.

```$(document).on("pagecontainerbeforechange", function (e, data) {
    if (typeof data.toPage == "object" &amp;&amp; typeof data.prevPage == "undefined" &amp;&amp; typeof localStorage.getItem('stored') != "undefined") {
        data.toPage = "#" + localStorage.getItem('stored');
    }
});
```

```
  Demo
```



{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 4, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2014:00:12/15/14', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><html><jquery-mobile><local-storage>', 'Title': 'Retrieving value from HTML5 local storage', 'ViewCount': 188, 'id': 27492314, 'user_AboutMe': None, 'user_AccountId': 4954347.0, 'user_DisplayName': 'Alin', 'user_Reputation': 1148.0, 'user_Views': 371.0, 'user_id': 3987406.0}}