27

So I'm searching for a good crash course on localstorage and interacting with it in Javascript. I want to build a to-do list webapp with some extra functionality but it would be just for 1 user. I don't want to mess with php/mysql and have the server doing anything. Links to tutorials would be best :-D

Justin Johnson
  • 30,978
  • 7
  • 65
  • 89
Alai
  • 271
  • 1
  • 3
  • 3

6 Answers6

18

Here's a crash crash course I found very useful. It explains a bunch of HTML5 concepts, including localStorage, video tag, offline websites, forms, locations, canvas, and more.

http://diveintohtml5.org/storage.html

Mathieu Delvaux
  • 68
  • 1
  • 9
Steve
  • 4,033
  • 5
  • 32
  • 29
10

There is the offical documentation:

http://dev.w3.org/html5/webstorage/

For a quick demo with code: http://html5demos.com/storage also more html5 demos at the root of that site.

Note there are also things like the YUI 2 Storage Utility which abstract the storage for you (HTML 5, Google Gears, SWF) depending on what the browser supports:

The Storage Utility provides a mechanism for storing significant amounts of textual data, client-side, whether or not your browsers supports the proposed HTML 5 Storage specification.

Peter McG
  • 18,857
  • 8
  • 45
  • 53
  • Since HTML5 isn't everywhere yet, appreciate the abstraction layer recommendation for better web app support (Update: YUI has moved to [version 3](http://yuilibrary.com/)). There is also an [older hack](http://www.thomasfrank.se/sessionvars.html) that has its share of warts but might be useful with older browsers. – moodboom May 07 '13 at 17:26
  • [jQuery's abstraction](http://www.jquerysdk.com/api/jQuery.localStorage) falls back to cookies. – moodboom May 07 '13 at 20:15
3

No personal experience but I did come across this link today: http://www.w3avenue.com/2010/05/07/html5-unleashed-tips-tricks-and-techniques/

Which links to this: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-learning-about-html5-local-storage/

Have fun!

Derek Swingley
  • 8,734
  • 5
  • 32
  • 33
3

This small tutorial/code-snippet helped me to get started.

http://hacks.mozilla.org/2009/06/localstorage/

Linus Unnebäck
  • 23,234
  • 15
  • 74
  • 89
2

I would recommend one of the other questions asked here about how to store objects in localStorage. It helped me a lot as I am implementing a code editor that can store multiple files and last state of the user.

The stackoverflow question
Both answers posted are very valuable.

Some things to take into consideration:

  • When do you store data, after each key pressed or after some other specific action/event?
  • Use a temporary Javascript data structure or only interact with localStorage directly?
Community
  • 1
  • 1
JeroenEijkhof
  • 2,232
  • 2
  • 25
  • 39
0
Store Data

//Syntax 
localStorage.setItem(Key,Value);

Demo

Kamal
  • 796
  • 7
  • 11