Determine if your Chrome Extension has Started Up for the First Time Using HTML5 localStorage
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!
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.
Bryan
I’m going through your code example and it doesn’t work.. It says the loadPage(); isn’t defined.