HTML5 Examples For Beginners : Including Editable Contents And Local Storage

e. Local storage

It is also referred as DOM Storage. It stores named key/value pairs locale with in browser. This data will remain even if the you close the browser window. Difference between Local Storage and cookies is that in Local Storage stored data is never transmitted to server unless u do it on purpose. For Local storage only 5 MB data can be stored. Below one example is given which allows you to enter data in a text box and save it as local storage. Also there is option to clear stored data.

Browser support : Internet Explorer 8+, Firefox 3.5+, Chrome 4.0 +, Android 2.0+, Safari 4.0+

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Local Storage Example</title>
</head>
<body>
   <h1>Local Storage in HTML 5</h1>
   <br/>
   Type in text area and click save. Refresh and check if local storage works. To clear local storage click Clear All
   <br/>
   <br/>
   <textarea id="ta" placeholder="Type your text here..." rows="10" cols="60"></textarea>
   <br/>
   <button id="save-ta">Save</button>
   <button id="clear-ta">Clear All</button>
   <p id="ta-log"></p>
<script defer>
   (function(){
   try {
   (window.localStorage.getItem) // will throw in Firefox under some settings
   } catch(e){
   return; // quit because dom.storage.enabled is false
   }
   var area = document.querySelector('#ta');

   // Get previously saved content
   if (!area.value) {
   area.value = window.localStorage.getItem('value');
   }
   updateLog(false);
   // your content will be saved locally
   document.querySelector('#save-ta').addEventListener('click', function () {
   window.localStorage.setItem('value', area.value);
   window.localStorage.setItem('timestamp', (new Date()).getTime());
   updateLog(true);
   }, false);

   // clear your local content
   document.querySelector('#clear-ta').addEventListener('click', function () {
   localStorage.clear();
   }, false);

   function updateLog(new_save) {
   var log = document.querySelector("#ta-log");
   var delta = 0;
   if (window.localStorage.getItem('value')) {
   delta = ((new Date()).getTime() - (new Date()).setTime(window.localStorage.getItem('timestamp'))) / 1000;
   if (new_save) {
   log.textContent = 'Contents Saved try refresing....';
   setTimeout(function() {
   log.textContent = '';
   }, 3000);
   } else {
   log.textContent = 'last saved: ' + delta + 's ago';
   }
   }
   }
   })();
</script>
</body>
</html>

Working example can be viewed here

HTML5 Examples For Beginners : Including Editable Contents And Local Storage

d. Including Editable contents

e. Local storage