LIDOR SYSTEMS

Advanced User Interface Controls and Components

Using HTML5 Local Data Storage to Preserve State in TreeView jQuery

Created: 01 April 2014

With HTML5 you can store information specific to your web application within the user’s browser. In the past this was done using cookies, however the new approach introduced with HTML5 is faster and more secure. In following sections we will explain how to use this feature to save the state of TreeView jQuery widget.

TreeView is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps





In HTML5 the data can be stored locally using name/value pairs. Only a web page which has stored this data can access it. The storage limit is set to a maximum 5MB, which is plenty for simple web applications.

To show you how to save the state of TreeView widget, at first let’s populate the TreeView with some data. We are using built-on methods to add/remove items to the TreeView. In our example we are using four buttons which when clicked modify the data in TreeView.

$('#add-root').click(function(e){

e.preventDefault();

 

itemCount = $tree.treeview("getCurrentList").length + 1;

$tree.treeview("addItem", { text: "Item" + itemCount, id: "0" + itemCount });

});

 

$('#add-child').click(function(e){

e.preventDefault();

 

// We are using the current item count and its level to create a unique id for each item

itemCount = $tree.treeview("getCurrentList").length + 1;

var selItem = $tree.treeview("option", "selectedItem");

var level = $tree.treeview("getItemLevel", selItem) + 1;

 

$tree.treeview("addItem", { text: "Item" + itemCount, id: level.toString() + itemCount }, selItem);

});

 

$('#remove').click(function(e){

e.preventDefault();

 

$tree.treeview("removeItem", $tree.treeview("option", "selectedItem"));

});

 

$('#clear').click(function(e){

e.preventDefault();

$tree.treeview("clearItems");

itemCount = 0;

});

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<link rel="stylesheet" href="css/integralui.treeview.css" />

<link rel="stylesheet" href="css/themes/theme-blue.css" />

<script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="external/jquery.ui.core.min.js"></script>

<script type="text/javascript" src="external/jquery.ui.widget.min.js"></script>

<script type="text/javascript" src="js/jquery.integralui.widget.min.js"></script>

<script type="text/javascript" src="js/jquery.integralui.treeview.min.js"></script>

</head>

<body>

<div id="treeview" class="widget"></div>

</body>

</html>

<style type="text/css">

.widget

{

width: 300px;

height: 300px;

}

</style>

Whenever an item is added or removed the state of TreeView will be saved. For this to work we need to handle the itemadded, itemremoved and clear events, where we add a code which saves the TreeView data.

// Whenever TreeView data is changed, we save it to a local storage

$tree.on({

"itemadded": function(e){

saveTreeView();

},

"itemremoved": function(e){

saveTreeView();

},

"clear": function(e){

saveTreeView();

}

});

Because HTML5 data storage only stores string values, we can’t store a list of items in that way. The solutions is to use the JSON stringify method which converts the item list to a string in JSON format. For this demonstration we have set the name of our local data to ‘treeData’, but you can choose any name you want.

Related: Data Binding in TreeView jQuery

The data is saved to a local storage using the setItem method, and setting a name for the local data and its value:

var saveTreeView = function(){

if (localStorage){

// Retrieve the list of items from the TreeView

var itemList = $tree.treeview("getList");

// Use JSON stringify method to save the item list as array

localStorage.setItem("treeData", JSON.stringify(itemList));

}

}

Now when we have some data present in local storage, we can reload the web page and test whether the data is preserved. If data is present in the local storage, the TreeView will be populate with it. If there is no data, the TreeView will remain empty.

In code below we are using the JSON parse method to extract the data from the local storage, because data is stored as an array. To retrieve the stored data, we are using the getItem method and the name under which data is saved, in our case data is saved as ‘treeData’.

// If there is local data present, populate the TreeView with it

if (localStorage){

// Suspend the TreeView layout to increase performance

$tree.treeview("suspendLayout");

 

// Use JSON parse method to extract the data from local storage

var storedItems = JSON.parse(localStorage.getItem("treeData"));

if (storedItems){

// Add items from parsed data to the TreeView

for (var i = 0; i < storedItems.length; i++)

$tree.treeview("addItem", storedItems[i]);

}

 

// Resume and update the layout of TreeView

$tree.treeview("resumeLayout");

}

In order to empty our local storage we need to call the clear method:

$('#empty').click(function(e){

// Empty the local storage

localStorage.clear();

});

You can check out this online sample which demonstrates using of HTML5 local data storage with TreeView jQuery.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.