Well, in my previous tips, I have showed you how you can inject some javascript code that will enable you to detect whether you are online or offline while browsing your application. I have also mentioned that you can even browse the entire website while being offline. But the matter of fact is, how could this be possible because the most important thing that we do during browsing is data storage. Should we use cookie to store data ? Naah…
HTML5 opens a new dimension to browser data storage. We have Indexed Db storage, Sql database storage or local storage apis. Let us consider Local storage in this post, we will cover other storage apis too in next posts.
The main API for offline local data storage is the window.localStorage. This API contains setItem and getItem to deal with local data storage.
window.localStorage.setItem('value', 'This is Abhisheks new HTML document');
window.localStorage.setItem('timestamp', (new Date()).getTime());
You can see here we have set the data to the browser local storage. Hence the data “This is Abhisheks new HTML document” will be stored as soon ass you call this API method, and this data will remain after you revisit the domain again at a later point of time.
The localStorage is used to store persistent data into browser cache without any expiration time. Now to get the localStorage item we use :
var text = window.localStorage.getItem('value');
The getItem will get the element from browser cache.
You should note, that localStorage is safe to browser restarts or even when you press ctrl+F5 to clear cache.
We can use removeItem to remove an element from local storage.
window.localStorage.removeItem('value')
The above code will remove the item value from local storage. Another important consideration to note is always detect if browser actually supports localStorage. Lets look into the code below :
if (typeof(localStorage) == 'undefined' ) {
alert('Your browser does not support HTML5 localStorage. Try upgrading.');
} else {
try {
localStorage.setItem("value", "This is Abhisheks new HTML document");
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert('Quota exceeded!');
}
}
document.write(localStorage.getItem("value"));
localStorage.removeItem("value");
So here the code looks perfect, we detect whether the browser is old and does not support HTML5 localStorage and even we throw an error when QUOTA_EXCEEDED_ERR for localStorage.
I hope this post comes helpful to you.
Happy coding
