Up until the introduction of HTML 5 web storage, the most common method for storing data locally on a user's machine was to use cookies and sessions. While these methods are adequate for storing simple values anything other than trivial amounts becomes problematic. This is where HTML 5’s Web Storage comes in to play. Referred to as "Local Storage", "DOM Storage" or a "Web SQL Database", HTML 5 web storage allows a developer the freedom to store large amounts of data on the clients machine that persists past past sessions, doesn't require unencrypted data to be transmitted to the server and stored items are available on the entire domain.
This web storage tutorial sets out to provide a practical use for openDatabase(), localStorage.setItem(), localStorage.getItem() and localStorage.clear().
Browser Support
As you might expect with any HTML 5 specification older browsers versions and browser with Javascript turned off do not allow this method. The good news is that all modern browsers support it and will continue to do so. The following browsers support HTML 5 Web Storage:
The linked example illustrates the use of Javascript, the HTML5 specification Web Storage and HTML5's contenteditable to dynamically store and retrieve data located on a users machine. Please note the following example will open in a new window. There you will be able to play with a demo and download a full working script: Web Storage Demo
The first thing we need to do is check if the users browser supports Web Storage. A small function does the job by attempting to determine whether the window object of the browser supports the the HTML5 localStorage. The statement will then catch any errors. The next segment displays an alert if local storage isn't supported.
var db = null;
function html5_storage_support() {
try {
return 'localStorage' in window && window[['localStorage']] !== null;
} catch (e) {
return false;
}
}
if (!html5_storage_support) {
alert("This Might Be a Good Time to Upgrade Your Browser or Turn On Jeavascript");
} else {
The first thing that we will do is create and open a database by initializing openDatabase() with the following parameters:
db = openDatabase("MyContacts", "0.1", "My Personal Contacts", 100000);
Here we create the function "storeMyContact(id)". The first three lines set the values we want to store by getting the innerHTML of the element by it's ID. What is unique to the web storage specification is localStorage.setItem(). The first object is name of the key we are storing (mcFull) and the second is the value we previously defined (fullname). Since we have three pieces of data we want to store we will repeat this process three times with different keys and associated values.
function storeMyContact(id) {
var fullname = document.getElementById('fullname').innerHTML;
var phone = document.getElementById('phone').innerHTML;
var email = document.getElementById('email').innerHTML;
localStorage.setItem('mcFull',fullname);
localStorage.setItem('mcPhone',phone);
localStorage.setItem('mcEmail',email);
}
The function function getMyContact() allows us to retrieve the data that we have stored or provides default values if the data doesn't exist. As with the previous function we combine some Javascript with localStorage.getItem().
The first task of this function is to see if there is any data stored. In this case we only need to see if "mcFull" has a value (A phone number and email address wouldn't have been saved without a name). We do this by calling localStorage.getItem(). This allows us to access the stored values and to define the Javascript variables fullname, phone and email if they exist. If they don't exist we will define them.
The last portion of this function is intended to populate the the inner HTML of an element by it's ID with the values we previously defined in the function.
function getMyContact() {
if (localStorage.getItem('mcFull')) {
var fullname = localStorage.getItem('mcFull');
var phone = localStorage.getItem('mcPhone');
var email = localStorage.getItem('mcEmail');
}
else {
var fullname = 'Enter A Name';
var phone = 'Enter A Phone Number';
var email = 'Enter An Email Address'
}
document.getElementById('fullname').innerHTML = fullname;
document.getElementById('phone').innerHTML = phone;
document.getElementById('email').innerHTML = email;
}
The last function we create is to give the user the ability to delete the data stored on their local machine. By using localStorage.clear() all data stored in MyContacts will be erased. If you don't want to use this nuclear option you can also specify the key which you wish to erase by using removeItem(someKey)
function clearLocal() {
clear: localStorage.clear();
return false;
}
}
The last bit of code we need to employ is to define the ID of the element span, div etc... in this case we are using the span tag we then call the storage function storeMyContact(this.id) on key up when ever something is typed within the inner HTML.
[span id="fullname" contenteditable="true" onkeyup="storeMyContact(this.id)"][/span]
[span id="phone" contenteditable="true" onkeyup="storeMyContact(this.id)"][/span]
[span id="email" contenteditable="true" onkeyup="storeMyContact(this.id)"][/span]
getMyContact();
[script]
var db = null;
function html5_storage_support() {
try {
return 'localStorage' in window && window[['localStorage']] == null;
} catch (e) {
return false;
}
}
//CHECK TO SEE IF THE BROWSER IS COMPATIBLE
if (!html5_storage_support) {
alert("This Might Be a Good Time to Upgrade Your Browser or Turn On Jeavascript");
} else {
//OPEN AND OR CREATE THE DATABASE ON THE USERS MACHINE
db = openDatabase("MyContacts", "1", "My Personal Contacts", 100000);
function storeMyContact(id) {
var fullname = document.getElementById('fullname').innerHTML;
var phone = document.getElementById('phone').innerHTML;
var email = document.getElementById('email').innerHTML;
localStorage.setItem('mcFull',fullname);
localStorage.setItem('mcPhone',phone);
localStorage.setItem('mcEmail',email);
}
//GET STORED VALUES FROM KEYS TO DEFINE JAVASCRIPT VALUES OR DEFINE IF THEY DO NOT EXIST
function getMyContact() {
if ( localStorage.getItem('mcFull')) {
var fullname = localStorage.getItem('mcFull');
var phone = localStorage.getItem('mcPhone');
var email = localStorage.getItem('mcEmail');
}
else {
var fullname = 'Click And Enter A Name';
var phone = 'Click And Enter A Phone Number';
var email = 'Click And Enter An Email Address';
}
document.getElementById('fullname').innerHTML = fullname;
document.getElementById('phone').innerHTML = phone;
document.getElementById('email').innerHTML = email;
}
function clearLocal() {
clear: localStorage.clear();
return false;
}
}
[/script]
[div id="myContacts"]
[div]N: [span id="fullname" contenteditable="true" onkeyup="storeMyContact(this.id)"][/span][/div]
[div]P: [span id="phone" contenteditable="true" onkeyup="storeMyContact(this.id)"][/span][/div]
[div]E: [span id="email" contenteditable="true" onkeyup="storeMyContact(this.id)"][/span][/div]
[div][a onclick="clearLocal(); getMyContact();" href="javascript:void(0);"]Clear All Of My Data[/a][/div]
[/div]
[script]
getMyContact();
[/script]
Let's get into contact so you learn more about us and we can create solutions for you!