DCSIMG
The story Begins - Gil Fink's Blog

Gil Fink's Blog

Fink about IT

News

Microsoft MVP

My Facebook Profile My Twitter Profile My Linkedin Profile

Locations of visitors to this page

Creative Commons License

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.
© Copyright 2013 Gil Fink

Hebrew Articles

Index Pages

My OSS Projects

English Articles

The story Begins

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.

Comments

Gil Fink's Blog said:

Advanced HTML5 and JavaScript APIs Slide Deck and Demos Today I delivered a MSDN session at Microsoft

# April 29, 2012 1:55 PM

Thomas said:

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.

# May 7, 2012 8:21 PM

Gil Fink said:

Hi Thomas,

First of all, I guess you are familiar with Ajax-Solr - 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.

# May 8, 2012 8:27 AM

Thomas said:

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.

# May 9, 2012 9:51 AM

Gil Fink's Blog said:

Advanced HTML5 and JavaScript APIs Slide Deck and Demos – Second Round Today I delivered a second round

# June 4, 2012 1:39 PM

Gil Fink's Blog said:

Web Development Community (WDCil) - Advanced HTML5 and JavaScript APIs Slide Deck and Demos Last night

# September 4, 2012 8:06 AM