When creating an application for Chrome, or for any platform or system, sometimes you want to display a screen one time, on the first load. This could be something like a welcome message, configuration page, or something else that is needed to display.
To achieve this functionality, you could take advantage of HTML5 localStorage. Here is how.
Note: While you create your code and test, you may have to clear your localStorage data. You can do this by right clicking on your chrome extension icon and “inspect popup” navigate to your localStorage and clear the value.
First start with a fresh html page and set a localStorage variable called firstLoad, give it a value of no and place it in a function called “loadPage”. If you are not sure how to set a HTML5 localStorage variable, see below.
localStorage.setItem('firstLoad', 'yes');
And with it added into the page:
<html>
<header>
<script type="text/javascript">
function loadPage() {
localStorage.setItem('firstLoad', 'no');
}
</script>
</header>
<body>
</body>
</html>
What this did is, every time the “loadPage” function is called it will set “firstLoad” to “yes”. Next we want to add this to the body tag and create an onLoad event, to call this function.
<html>
<header>
<script type="text/javascript">
function loadPage() {
localStorage.setItem('firstLoad', 'no');
}
</script>
</header>
</body onLoad="loadPage();">
<body>
</html>
Now every time the page loads, it will call this function. But now we this will set the variable to yes every time the page loads, but we only want to do this once, not every time. So the next thing we need to do, is check to see what value the “firstLoad” variable has, and then call the function.
We want to set a variable to store the returned value of “firstLoad”. This is achieved by using localStorage.getItem(‘key’)
<html>
<header>
<script type="text/javascript">
var firstLoadValue = localStorage.getItem('firstLoad');
function loadPage() {
localStorage.setItem('firstLoad', 'no');
}
</script>
</header>
<body onLoad="loadPage();">
</body>
</html>
Once we have this in place, we need some logic and decision making to determine if that value is “yes”. Lets create an if statement to check if the value is “no”, if it is, run the function to redirect to the page you want to show in place of your index, if not, set the value to no.
<html>
<header>
<script type="text/javascript">
function loadPage() {
var firstLoadValue = localStorage.getItem('firstLoad');
if firstLoadValue == 'no' {
window.location = "home2.html";
} else {
localStorage.setItem('firstLoad', 'no');
}
}
</script>
</header>
<body onLoad="loadPage();">
</body>
</html>
Next we want to create the second page “home2.html” so we can have a destination page.
Since localStorage is page independent, once redirected you will not see a value unless set for that specific page.
Now that we have this in place we are complete.
I hope you found thisHTML5 localStorage example useful. What are you doing with localStorage? let me know!
If you read my post on How To: Take Advantage of HTML5 localStorage to Remember Your Place in a Chrome Extension within the extension, download this working code example.
After installing the application, right click on the extension, and click on popup explorer, take a look at the local storage and look for the variable ‘lastPage’. You should see the last page you left off on.
As I continue to develop my app, I will post examples on how to go about creating a simple Chrome Extension.
Let me know if you have any questions.
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:
Index | Tools | Config | Login
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');
Index | Tools | Config | 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.
So the iPad has launched, and you do not have one. This quick little trick will let you view iPad formatted websites in your browser just as though you had one. You only need 3 things. The first is Firefox. The second is the “User Agent Switcher” plugin for firefox. This will allow you to switch your browsers user agent, so you can view alternative views of web pages specifically for a device with that user agent profile. Lastly, you will need the user agent line of text located below.
Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10
Install the User Agent plugin and create a new user agent profile. Paste in this code and switch to that profile. Next try and go to a website and see which one loks diferent. The website that made me want to try this was for GMAIL. Google just released a very slick looking new iPad formatted website specificly for that device. by going to gmail, it auto detects and thinks I am now using an iPad and displays the page as so. I would honestly love a view format like this for the web version of Gmail. It would be nice if they offered a view like this for web. In the meantime, I may just use an iPad user agent.
I was slightly disappointed as it did not look exactly as it the picture, but it was very cool none the less.
Check it out, test some sites and let me know how it goes. Did you find a cool website? Share it here!
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.
