Modernizr<\/a>, that help us to detect the browser support for HTML5 and CSS features.<\/p>\n\r\nfunction CheckBrowser() {\r\n\u00a0\u00a0 \u00a0if ('localStorage' in window && window['localStorage'] !== null) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/ we can use localStorage object to store data\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return true;\r\n\u00a0\u00a0 \u00a0} else {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 return false;\r\n\u00a0\u00a0 \u00a0}\r\n}\r\n<\/pre>\nInside the doShowAll()<\/code> if the CheckBrowser()<\/code> function evaluates to true we will dynamically create the table for Shopping list during the page load . You can iterate the keys (property names) of the key-value pairs stored in the local storage, like this<\/p>\n\u00a0\u00a0 for (i = 0; i <= localStorage.length - 1; i++) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0key = localStorage.key(i);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0list += "<tr><td>" + key + "<\/td>\\n<td>"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0+ localStorage.getItem(key) + "<\/td><\/tr>\\n";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\r\n<\/pre>\nBased on the storage value, draw the table dynamically to display the key\/value pair stored in local Storage.<\/p>\n
\r\nfunction doShowAll() {\r\n\u00a0\u00a0 \u00a0if (CheckBrowser()) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var key = "";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var list = "<tr><th>Name<\/th><th>Value<\/th><\/tr>\\n";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var i = 0;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0for (i = 0; i <= localStorage.length - 1; i++) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0key = localStorage.key(i);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0list += "<tr><td>" + key + "<\/td>\\n<td>"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0+ localStorage.getItem(key) + "<\/td><\/tr>\\n";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if (list == "<tr><th>Name<\/th><th>Value<\/th><\/tr>\\n") {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0list += "<tr><td><i>empty<\/i><\/td>\\n<td><i>empty<\/i><\/td><\/tr>\\n";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0document.getElementById('list').innerHTML = list;\r\n\u00a0\u00a0 \u00a0} else {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0alert('Cannot store user preferences as your browser do not support local storage');\r\n\u00a0\u00a0 \u00a0}\r\n}\r\n<\/pre>\nWe create a separate div<\/code> element to capture the user inputs and submission. We attach the corresponding JavaScript function in the onClick<\/code> event for the buttons.<\/p>\n\r\n<div id="PlayArea">\r\n \u00a0\u00a0\u00a0 \u00a0<table>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<tr>\r\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<td><b>Item:<\/b><input type=text name=name><\/td>\r\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<td><b>Quantity:<\/b><input type=text name=data><\/td>\r\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/tr>\r\n\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 <tr>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<td>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 <input type=button value="Save"\u00a0\u00a0 onclick="SaveItem()">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 <input type=button value="Modify" onclick="ModifyItem()">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 <input type=button value="Remove" onclick="RemoveItem()">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 <\/td>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 <\/tr>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/table>\r\n<\/div>\r\n<\/pre>\nInside our style sheet we have formatted the div<\/code> information as follows.<\/p>\n\r\n#PlayArea {\r\n\u00a0\u00a0 \u00a0border: 1px dotted blue;\r\n\u00a0\u00a0 \u00a0padding: 6px;\r\n\u00a0\u00a0 \u00a0background-color: #ccc;\r\n\u00a0\u00a0 \u00a0margin-right: 50%;\r\n}\r\n<\/pre>\nYou can set properties on the\u00a0localStorage<\/code> object just like with a normal JavaScript object. Here is an example on how we can set the local storage property myProperty<\/code> to the value myValue<\/code>.<\/p>\n\r\nlocalStorage.myProperty = "myValue";\r\n<\/pre>\nYou can delete local storage property like this.<\/p>\n
\r\ndelete localStorage.myProperty;\r\n<\/pre>\nAlternately use the following methods to access the localStorage<\/code><\/p>\n\r\nlocalStorage.setItem ('propertyName', 'value');\r\nlocalStorage.getItem ('propertyName');\r\nlocalStorage.removeItem ('propertyName');\r\n<\/pre>\nFor saving the key\/value pair capture the value of the corresponding javascript object and call the .setItem<\/code> method<\/p>\n\r\nfunction SaveItem() {\r\n\u00a0 var name = document.forms.ShoppingList.name.value;\r\n\u00a0\u00a0 \u00a0var data = document.forms.ShoppingList.data.value;\r\n\u00a0\u00a0 \u00a0localStorage.setItem(name, data);\r\n\u00a0\u00a0 \u00a0doShowAll(); \u00a0\r\n}\r\n<\/pre>\nTo fetch an existing key\/value pair we will use the .getItem<\/code> method<\/p>\n\r\nfunction ModifyItem() {\r\n\u00a0\u00a0 \u00a0var name = document.forms.ShoppingList.name.value;\r\n\u00a0\u00a0 \u00a0document.forms.ShoppingList.data.value = localStorage.getItem(name);\r\n\u00a0\u00a0 \u00a0doShowAll();\r\n}\r\n<\/pre>\nWe will use the .removeItem<\/code> method to delete from the storage.<\/p>\n\r\nfunction RemoveItem() {\r\n\u00a0\u00a0 \u00a0var name = document.forms.ShoppingList.name.value;\r\n\u00a0\u00a0 \u00a0document.forms.ShoppingList.data.value = localStorage.removeItem(name);\r\n\u00a0\u00a0 \u00a0doShowAll();\r\n}\r\n<\/pre>\nThere is another method for local storage that allows you to clear the entire local storage.We have called the ClearAll()<\/code> function in the onClick <\/code>\u00a0 event of the “Clear” button.<\/p>\n\r\n<input type=button value="Clear" onclick="ClearAll()">\r\n<\/pre>\nWe have used the clear<\/code> method to clear the local storage as shown below.<\/p>\n\r\nfunction ClearAll() {\r\n\u00a0\u00a0 \u00a0localStorage.clear();\r\n\u00a0\u00a0 \u00a0doShowAll();\r\n}\r\n<\/pre>\nSession Storage<\/h2>\n
The sessionStorage<\/code> object works in same way as the localStorage<\/code>. You can substitute the above example with sessionStorage<\/code> object\u00a0 to persist the data only for the session. Once the user closes the browser window, the storage will be cleared. To summarize, the API for localStorage<\/code> and sessionStorage<\/code> is exactly the same, and allows you to use the following methods:<\/p>\n\n- setItem(key, value);<\/li>\n
- getItem(key)<\/li>\n
- removeItem(key)<\/li>\n
- clear()<\/li>\n
- key(index)<\/li>\n
- length<\/li>\n<\/ul>\n
![\"html5](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/01\/HTMLStorage.jpg\")
<\/a>