Javascript - Local Storage with expiry options.

Most of the time, a local storage in HTML5 browsers is helpful to cache content from server for a certain period, Be it a dynamic menu, a big json data or a complex javascript object.

All it need is to store in local storage for a certain period, collect data from local storage without hitting server again and again. But when the caching time lapses, the content should be retrieved fresh from the server.

Below is a Javascript object which should be pretty much helpful to store and retrieve content in local storage with an optional time limit, expiring which, the returned value will be null instead, prompting us to get fresh data and store again.

Moreover, it saves javascript objects to localstorage, with a certain prefix to identify object ("_|_obj_|_"), so that it can parse the value at the time of storing and retrieving the object

var localStorageObj = {
    init: function () {
        this.$timeSuffix = "_lu";
        this.$expiryDuration = 100;
        this.$objIdentifier = "_|_obj_|_";
        if (typeof(Storage) !== "undefined") {
            hasLocalStorage = true;
        } else {
            hasLocalStorage = false;
        }
    },
    getCurrentTimeStamp: function () {
        if (!Date.now) {
            Date.now = function () {
                return new Date().getTime();
            }
        }
        return cTimeStamp = Date.now() / 1000 | 0;
    },
    setItem: function (key, item) {
        // Convert to string if the type of items is in object.
        if (typeof item === "object") {
            item = this.$objIdentifier + JSON.stringify(item);
        }
        if (!hasLocalStorage) {
            return false;
        }
        // set localStorage
        localStorage.setItem(key, item);
        // if track time store current time.
        localStorage.setItem(key + this.$timeSuffix, this.getCurrentTimeStamp());
    },
    getItem: function (key, expiryDuration) {
        if (!hasLocalStorage) {
            return false;
        }

        var data = localStorage.getItem(key);

        if (data == null) {
            return null;
        }
        // set default expiry duration if not provided.
        if (typeof(expiryDuration) === 'undefined') {
            expiryDuration = this.$expiryDuration;
        }
        // Check expiry.
        if ((this.getCurrentTimeStamp() - localStorage.getItem(key + this.$timeSuffix)) > expiryDuration) {
            return null;
        }

        return this.parseData(data);
    },
    parseData: function (data) {
        // parse data only if its meant to parse when set.
        if (data.substring(0, this.$objIdentifier.length) == this.$objIdentifier) {
            data = JSON.parse(data.substring(this.$objIdentifier.length));
        }
        return data;
    }
};
// Just initilize the object to set its local variables.
localStorageObj.init();

Now, how to use it? Our object has already been initialised in above script. We just need to check if value is available in a certain identifier (items). If data not available, call setItem() to store to localStorage in order to use it further. See below example :


1
2
3
4
5
6
7
8
var items = localStorageObj.getItem('items');
if (items === null) {
    // item not available in the localStoreage, collect it from elsewhere.
    items = {"key1" : "hello world", "another_key" : "This is another Value"};
    localStorageObj.setItem('items', items);
    // store for the first time. it will be available until cache time lapses.
}
console.log('items:', items);

Hope it helps!

Comments

Post a Comment

Popular posts from this blog

Filtering and Sorting a Doctrine Arraycollection

ArrayCollection object has so many useful in-build methods, that makes ArrayCollection superior comparable to normal PHP array. This post is about how to filter and sort an ArrayCollection so output of elements can be in certain order or filtered. Filter To filter we can use ArrayColleciton in-build filter method , which takes a predicate and returns all the elements satisfied by the predicate provided, keeping the order of the elements intact. A code example would be nice. Code Example : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <?php /** * @var \Doctrine\Common\Collections\Collection */ $locations ; // ArrayCollection() variable that has $location object in its element. // To filter active locations. $activeLocations = $locations -> filter ( function ( $location ) { return $location -> getStatus (); // filter based on status. }); // Now $activeLocations holds all locaitons from $locations those have an active locaiton. ?> Sort Arra
Read more

Doctrine mapping (ORM) with Database (DAL), Unidirectional vs Bidirectional.

Creating relationships inside a database is a very common thing for an web developer. Respecting to to RDBMS concept, we can create any sort of relationship inside a database. Things get changed when we have to use Doctrine for the mapping with database. Initially this made pretty much confused to me. Only after live working examples and few docs, I could able to get rid of it somehow. This post is about Doctrine mapping and difference between Unidirectional and Bidirectional relationship. What is Doctrine ? Doctrine is a set of PHP libraries that provides persistence services that is helpful managing PHP objects with Database layer. That means it creates a bridge between PHP light weight mapped objects and Database Objects. So Doctrine provides how to map PHP objects internally by its ORM (Object Relational Mapper) and its DB layer (DAL : Database Abstraction Layer) provides a unique object based query language(DQL : Doctrine Query Language) to write db queries independent of data
Read more

Drupal 7 - How to make dynamic select box through Drupal #ajax framework

In Drupal 7 we often need few select boxes to be dependent themselves that means the child select box options are dependent on the parent field's selected option. A very nice example could be Country, State, City those normally has dependency. Though the trick behind Drupal 7 ajax framework is quite simple but it takes quite a time for a first timer as usual ;) . In this post, I have explained a similar example that does the same with no JS required (Drupal 7 does it behind the screen). The Example: I have a Drupal 7 vanilla instance, that has article content type by default. Article content type has 2 select box field depending on each other, Parent field called : Datatype (field_data_type) and child field called as Subdata(field_sub_data). Apart form the Durpal 7 content type config, I am using a custom module named as 'common' and only a hook_form_alter to modify the form. So, Lets start by hooking the form : The form alter: 1 2 3 4 5 6 7 8 9 10
Read more