Storing Arrays in LocalStorage

December 6, 2013 at 4:48 pm in HTML5, Javascript, Web Storage

LocalStorage is amazing. We can persist data right on the client’s computer in the browser. We’ll have 5 to 10 MB of storage available.  However, it’s often not quite good enough for our needs; the values we store must be strings.

But with the help of JSON.stringify() and JSON.parse(), we can use LocalStorage for much more.

var names = [];
// collect some stuff into  the names array.
for(var count=0; count < 5; count++){
  names.push(prompt("New member name?"));

// convert the array of names into a JSON string. 
localStorage["names"] = JSON.stringify(names);

Later, we’ll want to retrieve those from the localStorage database. So we turn the string back into an array like this:

var namesFromLocalStorage = JSON.parse(localStorage["names"]);

You could use LocalStorage as a cache for all sorts of things. Simple arrays, complex objects, and even content. Prefetch records from the backend in the background, push it into LocalStorage as a simple cache. When the user hits the “next page” button, display the results of LocalStorage’s content while fetching the next set of records.

How are you using LocalStorage in your projects?

No comments

Audio.js – Cross-browser Audio Support

December 13, 2010 at 3:36 pm in audio, Javascript

In the book, we talked about supporting video and audio across multiple platforms, but we didn’t talk about a Flash-based fallback; we instead just let the visitor download the file.

The Audio.js project provides a simple API to create a cross-browser audio experience very similar to the many video solitions we talked about tin the book. I’ve played with this a little bit and it’s pretty handy.

No comments

Todo List with Backbone.js and LocalStorage

October 26, 2010 at 5:34 pm in HTML5, Javascript, Web Storage

HTML5’s Web Storage API lets us store data on the client’s machine without using cookies. You can use this to build complete client-side applications using HTML and JavaScript. One of the neatest examples of this so far is this simple To-Do list application which uses the Backbone.js framework. As a bonus, the source code for the application is annotated!

What a great way to demonstrate the usefulness of localStorage!

No comments

Store.JS – Cross-browser LocalStorage abstraction layer

June 28, 2010 at 9:01 pm in Javascript, Web Storage

Store.js just showed up on Github and looks promising. According to the site,

localStorage wrapper for all browsers without using cookies. Uses localStorage, globalStorage, and userData behavior under the hood

Take a look at the source code. It’s pretty small, very easy to read, and shows some nice uses of Javascript.

No comments