One of the interesting features that the datajs library includes is a store API which abstracts 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 calls to the server. Since datajs is only in Alpha, this API might change in future but even so, I’ll explain and show 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, the 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 is 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 the 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
Let's look at a simple example:
<!DOCTYPE html>
<html>
<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>
Let's 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 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 inserts 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.
