Quick Tip: Learning About HTML5 Local Storage
videos

Quick Tip: Learning About HTML5 Local Storage

Tutorial Details
  • Technology: HTML5
  • Length: 4 Minutes
  • Topic: Local Storage
This entry is part 6 of 14 in the HTML5 and You Session
« PreviousNext »

In today’s video quick tip, we’re going to build a working, though very basic, to-do list in just a minute or two. Thanks to HTML5′s local storage, we can make advanced browsers “remember” what we type, even after the browser is closed or is refreshed.

“localStorage sets fields on the domain. Even when you close the browser, reopen it, and go back to the site, it remembers all fields in localStorage.”
-QuirksBlog

While obviously not supported across all browsers, we can expect this method to work, most notably, in Internet Explorer 8, Safari 4, and Firefox 3.5. Note that, to compensate for older browsers that won’t recognize local storage, you should first test to determine whether window.localStorage exists.

Support matrix

via http://www.findmebyip.com/litmus/

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.plutov.by Alexander

    Some additional information about HTML5 and local storage you can find here http://plutov.by/post/html5_local_storage

  • http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-learning-about-html5-local-storage/ Tib

    Hi
    Nice and simple , tutorial
    what would you say would be best fallback practise when local Storage doesn’t exist ?
    Thanks
    TIbor

  • Rameez

    using $(edit).live(‘blur keyup paste’, function(){}); would be better to use to save data.. above example won’t save data if u don’t click out side the contenteditable area n directly click on refresh button..

    anyways..nice tute..thanks for sharing :)