Model browser like Mozilla Firefox and Google Chrome are equipped with the HTML5 web storage capabilities which used for storing data in a web browser. This tutorial will guide you on how to store the data by using both local storage and session storage.
Local storage and session storage, behaving similarly to persistent cookies and session cookies respectively. Data placed in local storage is persists after the browser is closed. However, session storage is per-page-per-window and is limited to the lifetime of the window.
- Let’s create a html file with 5 buttons as following.
The button’s onclick event will be fired and call each respective function accordingly whenever user click the button.123456789101112131415<!DOCTYPE HTML><html><head><title>HTML5 Web Storage</title></head><body><h1>HTML5 Web Storage</h1><br /><button type="button" onclick="write_local_storage()">Write Local Storage</button><button type="button" onclick="read_local_storage()">Read Local Storage</button><button type="button" onclick="write_session_storage()">Write Session Storage</button><button type="button" onclick="read_session_storage()">Read Session Storage</button><button type="button" onclick="clear_data()">Clear</button></body></html> - Insert a <script></script> tag before the </head> tag.
- Let’s start to create all the javascript based function within the <script></script> tag now so that each button will carry its own functionality.
- To Verify if web storage is supported
12345678910function check_support(){if(typeof(Storage) == "undefined"){alert("Sorry! No web storage support!");return false;}return true;} - Write to local storage
12345678910function write_local_storage(){if (check_support()){var persistObject = { 'Smith': 23, 'Kobi': 18, 'Alex': 32 };// Put the object into storagelocalStorage.setItem('persist_data', JSON.stringify(persistObject));}} - Read from local storage
123456789101112131415function read_local_storage(){if (check_support()){// Retrieve the object from storagevar storage = window.localStorage;var retrievedObject = storage.getItem('persist_data');var length = storage.length;alert("Retrieving " + length + " item(s) from localstroage");alert(retrievedObject);}} - Write to session storage
12345678910function write_session_storage(){if (check_support()){var sessionObject = { 'keycode': 111, 'passpharse': 222, 'id': 888 };// Put the object into storagesessionStorage.setItem('session_data', JSON.stringify(sessionObject));}} - Read from session storage
123456789101112131415function read_session_storage(){if (check_support()){// Retrieve the object from storagevar storage = window.sessionStorage;var retrievedObject = storage.getItem('session_data');var length = storage.length;alert("Retrieving " + length + " item(s) from localstroage");alert(retrievedObject);}} - Clear all storage data
123456789function clear_data(){if (check_support()){localStorage.clear();sessionStorage.clear();}}
The final content of the html file will look similar like the following:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
<!DOCTYPE HTML> <html> <head> <title>HTML5 Web Storage</title> <script> // Verify if web storage is support function check_support() { if(typeof(Storage) == "undefined") { alert("Sorry! No web storage support!"); return false; } return true; } // Write to local storage function write_local_storage() { if (check_support()) { var persistObject = { 'Smith': 23, 'Kobi': 18, 'Alex': 32 }; // Put the object into storage localStorage.setItem('persist_data', JSON.stringify(persistObject)); } } // Read from local storage function read_local_storage() { if (check_support()) { // Retrieve the object from storage var storage = window.localStorage; var retrievedObject = storage.getItem('persist_data'); var length = storage.length; alert("Retrieving " + length + " item(s) from localstroage"); alert(retrievedObject); } } // Write to session storage function write_session_storage() { if (check_support()) { var sessionObject = { 'keycode': 111, 'passpharse': 222, 'id': 888 }; // Put the object into storage sessionStorage.setItem('session_data', JSON.stringify(sessionObject)); } } // Read from session storage function read_session_storage() { if (check_support()) { // Retrieve the object from storage var storage = window.sessionStorage; var retrievedObject = storage.getItem('session_data'); var length = storage.length; alert("Retrieving " + length + " item(s) from localstroage"); alert(retrievedObject); } } // Clear all storage data function clear_data() { if (check_support()) { localStorage.clear(); sessionStorage.clear(); } } </script> </head> <body> <h1>HTML5 Web Storage</h1><br /> <button type="button" onclick="write_local_storage()">Write Local Storage</button> <button type="button" onclick="read_local_storage()">Read Local Storage</button> <button type="button" onclick="write_session_storage()">Write Session Storage</button> <button type="button" onclick="read_session_storage()">Read Session Storage</button> <button type="button" onclick="clear_data()">Clear</button> </body> </html> |
If you open the html file from web browser, you should observe the following screen. Try to click the button to experience the web storage feature powered by HTML5.
Note: If you have problem with running local file using Google Chrome, try this: Open Local File in Google Chrome
HTML5 Web Storage Example