How To: Take Advantage of HTML5 localStorage to Remember Your Place in a Chrome Extension
So I started working on my chrome extension a few weeks ago and right off the bat, I needed to solve a problem. Having my chrome extension remember my place when I exit, so when I return it will be on the same “tab” within my application. Using HTML5 localStorage you can save the users place.
This may seem minor, but if a user needs to use your extension and re-navigate to get back to their spot, it could get annoying or deter use of the extension or app, this is how to solve that issue.
A practical example. You want to monitor your blog comments, when you exit, you need to re-navigate to, tools>comments>and adjust a datestamp. 5 minuts go by, you open, re-navigate to tools>comments>and adjust a datestamp. See? If Chrome could just remember your place and load it when you relaunch, that would be idea.
Remember, that you need a HTML5 capable browser for these functions work.
Lets begin. I have a 4 page extension: an index.html, login.html, tools.html and config.html – what I need to solve for is a way for it to recognize what page I am on, and store it in the localStorage. Check for it on my next extension start up, then load the page where the user left off.
There are many ways to go about doing this, but after thinking about it for a little, I found this to be the most efficient way. Instead of having the tab load, then set the current page variable, it should be set before you even arrive on that page, from the link. This will avoid any errors.
Lets start with the index page since this will be the important one, or the one doing the processing on extension launch. Create links to all your pages so you have a unversal navigation:
Next we want to set our first HTML5 localStorage variable done in Javascript by using this:
localStorage.setItem('variableName', 'variableValue');
The first variable is the variable you want to store, and the second value is the value of that variable. Since we want this variable to be set onClick the link, we next need to add onClick's with this localStorage value. Pertaining to this example, set the variable name to "lastPage" and set the variable value to the page they will be going to.
onclick="localStorage.setItem('lastPage', 'index');
onclick="localStorage.setItem('lastPage', 'tools');
onclick="localStorage.setItem('lastPage', 'config');
onclick="localStorage.setItem('lastPage', 'login');
By doing so, as soon as the user clicks tools, it will store the last page "tools" in the database. Rather than going to the page, loading the page and setting the value.
Next we want to add this to every page.
After this is on every page lets go back to the index page so we can do the logic to process the variables after the extension is reopened.
The first thing we want to do, is check to see that the last page was, before we load our index page, because by default, the index page will load but if we have an "if statement" we can re-rout to the appropriate page.
Lets add a localStorage get to the page like so, and create a variable "lastPage" to store it:
var lastPage = localStorage.getItem('lastPage');
below that we want to add our if statement. What this will do, with thehelp from the localStorage.getItem, is grab the stored value of lastPage, then run through the if statement. Once it finds a match, it will simply redirect to that page.
if (lastPage == 'index')
{
//SINCE WE ARE ON THE INDEX PAGE ALREADY, DO NOTHING
}
else if (lastPage == 'tools')
{
window.location = "tools.html";
}
else if (lastPage == 'login')
{
window.location = "login.html";
}
else if (lastPage == 'config')
{
window.location = "config.html";
}
else
{}
After that is in place, you are complete. Just a few lines of code can solve for an annoying issue. Especially if you don't want to annoy your users.
I will be documenting multiple topics on HTML5 as I continue with this project. Hope you find this useful.
Hi im Tim and I love to do experiments and take adventures online. Professionally I am a Digital Media Producer out of Boston, MA and design, develop and produce interactive media.
