So the Google Chrome Extension I am working on, finally has some purpose, I connected the dots in my code to allow some neat functionality. Remotely connecting to WordPress, logging in and creating a post. Right from the comfort of my own browser.
This is the simple basics. I will be integrating, editing, commenting and approving comments right from this extension.
Anyhoo, I’ll keep you updated and follow up with some examples on connecting with XML-RPC.
Sweet.
There comes a time in every apps life, where saving data needs to be done to accomplish multiple things. There are two ways in which you can save data locally, without using a database. But which one do I use when? Well lets take a look.
Session storage you can think of as a global item. A piece of data that can be accessed anywhere in your app. A localStorage item is specific to one page within the application.
If you have an application that requires a login with user name and password, it would be a better idea to store information in the session since it would need to be passed around page to page.
Don’t forget, your password and username are kept unencrypted if done the wrong way. Taking advantage of a database could benefit.
The best thing about using either, is the syntax is literally the same for storing and getting values. localStorage.setItem(‘username’, ‘admin’); or sessionStorage.setItem(‘username’, ‘admin’).
Try it out, what do you personally use? Let me know!
Here is the source to my tutorial on determining if your Chrome Extension has started for the first time. To get a walk though, check it out below.
I hope you like the file, let me know about your HTML5 localStorage adventures!
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.
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.
