.NET Zone is brought to you in partnership with:

Gil Fink, Microsoft MVP, is an expert in Web development and Microsoft data platform. He works as a senior architect at Sela Group. He is currently consulting for various enterprises and companies, where he architects and develops Web and RIA-based solutions. He conducts lectures and workshops for developers and enterprises who want to specialize in infrastructure and Web development. He is also a co-author of several Microsoft Official Courses and training kits. You can read his publications at his blog: http://blogs.microsoft.co.il/blogs/gilf. Gil is a DZone MVB and is not an employee of DZone and has posted 147 posts at DZone. You can read more from them at their website. View Full User Profile

Working with Client-Side Storage Using datajs Store API

04.29.2011
| 4056 views |
  • submit to reddit

One of the interesting features that datajs library includes is a store API which abstract the use of client-side storage mechanisms. You can use the store API in order to have a storage layer in your client-side and therefore reduce the calls for the server. Since datajs is only in alpha then this API might change in the future but even so I’ll explain and show a how to use it in this post.

datajs Storage Options

datajs currently provides an abstraction layer on top of the following three client-side storage options:

  • In-memory – the datajs team implemented an in memory storage mechanism that can be used with the datajs library.
  • DOM Storage – I wrote about this client storage type in the past. Most of the new browsers (IE, Chrome, Firefox, Opera and more) include implementation for DOM Storage which is a key-value dictionary that exists on client-side.
  • IndexedDB – this is a new HTML5 specification that is being developed these days and therefore it is only experimental. Most of the browsers haven’t implemented this feature yet. Even so, datajs team is exploring this option and when the browsers will provide IndexedDB implementation you’ll be able to use it through datajs. 

datajs Store API

The first thing that you’ll want to do when you use the store API is to create the storage object. In order to do that you will have to call the createStore function. The function gets two parameters – the name of the storage and the mechanism to use underneath. The mechanism parameter is optional and can get one of the following options:

  • best – datajs will use the modern API that exists in the user’s browser. This is the default value so if you won’t provide a value to the mechanism parameter datajs will choose the best option for you.
  • memory – datajs will use the in-memory implementation that is provided in the library.
  • dom – datajs will use the Dom Storage implementation.
  • indexeddb – datajs will use the IndexedDB implementation.
Here an example of creating a new storage object that uses Dom Storage:
var store = datajs.createStore('MyStorage', 'dom');

After you have created the store object you can start using the store API. The API includes many simple functions such as add, remove, update, lookup and more. For further reading about those methods go to store API page. One of the things that you will notice about the API is that all the API functions work asynchronously (they get success and error callbacks).

datajs Store API Example

Lets look at a simple example:

<head runat="server">

    <title>datajs Example</title>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js" type="text/javascript"></script>

    <script src="Scripts/datajs-0.0.3.min.js" type="text/javascript"></script>

</head>

<body>

    <form id="form1">

    <div>

        Insert data into drop down list. The data is saved into datajs storage.

        <div>

            <input type="text" id="data" /><input type="button" id="btnInsert" value="Save" />

        </div>

        <div>

            <select id="storedData">

            </select>

        </div>

    </div>

    <script type="text/javascript">

        var store;

        $(document).ready(function () {

            store = datajs.createStore("MyStorage");

            $("#btnInsert").click(function () {

                var insertedValue = $("#data").val();

                store.add(insertedValue, insertedValue,

                    function (key, value) {

                        $(document.createElement("option")).val(value).text(key).appendTo($("#storedData"));

                    }, function (error) {

                        alert(error.message);

                    });

            });

        })

    </script>

    </form>

</body>

</html>

Lets explore the example. First of all you can see that I use jQuery along with datajs. datajs is a library that is focusing on handling data which is a complimentary to things that jQuery does. So you can choose to use jQuery, datajs or both of them in the same application. In the sample, I’ve created a simple page that insert data from a textbox into a drop down list. As a side affect the data is also saved into a client-side storage. In the JavaScript code I first create the storage using the createStore function. Since I’m not giving a mechanism as a second parameter the datajs will use the best mechanism that exists in my browser. I then wire the click event for the insert button. The event will extract the value from the textbox and insert it into the datajs created storage using the add function. After the successful insert the success callback function will be called and will insert the data into the drop down list. If an error occurs the error callback will alert the user of the error.

Summary

In this post I gave you a simple taste of datajs’s store API. If this is something that interests you the datajs team looks for feedback about their decisions. Some of their questions are written in the store API page.

References
Published at DZone with permission of Gil Fink, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)