The story Begins

April 21, 2012

3 comments

The story Begins

The story BeginsLately, I’ve decided to write my own JavaScript library for educational and experimental purposes. The idea came to me while I was creating a demo to a session that I will deliver in the near future. In the session, I wanted to show how to use different JavaScript storage types and didn’t wanted to change my code every time for every storage type.

So I’ve created a library to handle client-side data storages in simple and consistent way. The library is called story.js and its first bits are hosted in GitHub. Right now the library includes the following storage types:

  • Web Storage
  • IndexedDB
  • Cookies
  • In-memory

In the future expect more features. I’ve also convince my managers at Sela Group to help in this initiative and other Sela experts (Noam and Sebastian) agreed to contribute to the library. You can join us too – just let me know through the Blog’s contact form.

Here are simple code snippets that show how to use story.js with Web Storage:

/// <reference path="story.js" />
var storage = story.storage(story.StorageTypes.WEB_STORAGE);
storage.add("key", "value").then(function (data) {
    console.log(data);
}, function (error) {
    console.log(error);
});
storage.get("key").then(function (data) {
    console.log(data);
}, function (error) {
    console.log(error);
});
storage.contains("key").then(function (data) {
    console.log(data);
}, function (error) {
    console.log(error);
});
storage.update("key", "value1").then(function (data) {
    console.log(data);
}, function (error) {
    console.log(error);
});
storage.remove("key").then(function (data) {
    console.log(data);
}, function (error) {
    console.log(error);
});
storage.contains("key").then(function (data) {
    console.log(data);
}, function (error) {
    console.log(error);
});
storage.clear().then(function (data) {
    console.log(data);
}, function (error) {
    console.log(error);
});

with in-memory:

/// <reference path="story.js" />
var storage = story.storage(story.StorageTypes.IN_MEMORY);
storage.add("key", "value").then(function (data) {
    console.log(data);
}, function (error) {
    console.log(error);
});
storage.get("key").then(function (data) {
    console.log(data);
}, function (error) {
    console.log(error);
});
storage.contains("key").then(function (data) {
    console.log(data);
}, function (error) {
    console.log(error);
});
storage.update("key", "value1").then(function (data) {
    console.log(data);
}, function (error) {
    console.log(error);
});
storage.remove("key").then(function (data) {
    console.log(data);
}, function (error) {
    console.log(error);
});
storage.contains("key").then(function (data) {
    console.log(data);
}, function (error) {
    console.log(error);
});
storage.clear().then(function (data) {
    console.log(data);
}, function (error) {
    console.log(error);
});

with cookies:

/// <reference path="story.js" />
var storage = story.storage(story.StorageTypes.COOKIE);
storage.add("key", "value").then(function (data) {
    console.log(data);
}, function (error) {
    console.log(error);
});
storage.get("key").then(function (data) {
    console.log(data);
}, function (error) {
    console.log(error);
});
storage.contains("key").then(function (data) {
    console.log(data);
}, function (error) {
    console.log(error);
});
storage.update("key", "value1").then(function (data) {
    console.log(data);
}, function (error) {
    console.log(error);
});
storage.remove("key").then(function (data) {
    console.log(data);
}, function (error) {
    console.log(error);
});
storage.contains("key").then(function (data) {
    console.log(data);
}, function (error) {
    console.log(error);
});
storage.clear().then(function (data) {
    console.log(data);
}, function (error) {
    console.log(error);
});

and with IndexedDB:

/// <reference path="story.js" />
var factory = story.storage(story.StorageTypes.INDEXEDDB);
factory.createStore({
    name: "people",
    keyPath: undefined,
    autoInc: false,
    names: ["name", "email"],
    values: ["name", "email"],
    unique: [false, true]
}).then(function (storage) {
    console.log(storage);
    storage.add("key", "value").then(function (data) {
        console.log(data);
    }, function (error) {
        console.log(error);
    });
    storage.get("key").then(function (data) {
        console.log(data);
    }, function (error) {
        console.log(error);
    });
    storage.contains("key").then(function (data) {
        console.log(data);
    }, function (error) {
        console.log(error);
    });
    storage.update("key", "value1").then(function (data) {
        console.log(data);
    }, function (error) {
        console.log(error);
    });
    storage.remove("key").then(function (data) {
        console.log(data);
    }, function (error) {
        console.log(error);
    });
    storage.contains("key").then(function (data) {
        console.log(data);
    }, function (error) {
        console.log(error);
    });
    storage.clear().then(function (data) {
        console.log(data);
    }, function (error) {
        console.log(error);
    });
}, function (error) {
    console.log(error);
});

Pay attention that this is an experimental library and there might be bugs.

Expect more story versions in the future.

I’ll appreciate any feedback about this initiative.

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

3 comments

  1. ThomasMay 7, 2012 ב 20:21

    Thanks for Story!

    I’ve been building a Java app that is increasingly being revamped into an HTML5 based hybrid app. One of the major backends I’ve been planning for is Apache Solr, the very popular enterprise search engine. The scenario I plan is one where a Solr index on the remote server contains indexed searchable documents. Then the hybrid client queries Solr and returns documents in JSON format to store in a local cache. Once in the local cache the JSON strings can be deserialized (parsed) into expanded Javascript objects, I call this activation.

    I hope this scenario  can work with the new HTML5 cache options? Is there anyone hooking Solr up with HTML5? As far as I know the HTML5 indexDB option has no search capability so it is no match for Solr.

    Reply
  2. Gil FinkMay 8, 2012 ב 8:27

    Hi Thomas,

    First of all, I guess you are familiar with Ajax-Solr – http://evolvingweb.github.com/ajax-solr/

    To answer the question, IndexedDB do have some sort of search capability (using cursors and key ranges) but it is limited. Regarding HTML5 and Solr, I don’t know whether there is someone that hooks it with HTML5 but Ajax-Solr and probably IndexedDB on the client-side might be the answers you need.

    I hope it will help you.

    Reply
  3. ThomasMay 9, 2012 ב 9:51

    Thanks for the Ajax-Solr link, looks great, did not know about it and will explore it further. Still need the local storage aspect as a first and then the shinny ajax widgets as a second. Basically, the returned Solr data needs to be stored somewhere, this is how I see local storage fitting into the scenario.

    Reply