1. there are 2 kinds of storage for HTML 5,
window.sessionStorage to retain values for the duration of the session, or
window.localStorage to retain values for longer periods.

2. Example to save and get the value
window.localStorage.setItem(“key”, “value”); // is used to save a variable in local storage
window.sessionStorage.getItem(“key”); // is used to get the variable value

3. If an array is required to save in the data, JSON should be used

// build the object in JSON format
var attendanceEntry = { "StaffName": "Allen Kan", "StaffNo": "222222", "AttendanceType": "In", "AttendanceDateTime": getCurrentDateTime() };

// Since it should be 2d array (an array inside an array), we have to "add" / "push" to the master array
attendanceMaster.push(attendanceEntry)

// the following line to covert object to JSON
JSON.stringify(attendanceMaster)

4. Complete Example

<script type="text/javascript">

// detect current mode is online or offline
function updateIndicator() {
	$('#indicator').html(navigator.onLine ? 'online' : 'offline');
}

// example: save value
function setValue() {

	var attendanceMaster = [];

	if (window.localStorage.getItem("attendanceMaster") != null)
		attendanceMaster = JSON.parse(window.localStorage.getItem("attendanceMaster"));

	// this is hard code entry
	var attendanceEntry = { "StaffName": "Allen Kan", "StaffNo": "222222", "AttendanceType": "In", "AttendanceDateTime": getCurrentDateTime() };
	
	// add the entry to the list
	attendanceMaster.push(attendanceEntry);

	// JSON the string and display it
	buildTable(JSON.stringify(attendanceMaster));

	// set a session value
	window.localStorage.setItem("attendanceMaster", JSON.stringify(attendanceMaster));
}

// example get value
function getValue() {
	// get a session value - returns "my data"
	var attendanceMasterJSON = window.localStorage.getItem("attendanceMaster");
	var attendanceMaster = JSON.parse(attendanceMasterJSON)
	alert(attendanceMaster);

	buildTable(attendanceMasterJSON);
}

// build JSON result to table
function buildTable(tableData) {
	var table = $("#grid");
	table.html("");  //clear out the table if it was previously populated
	eval("var data = " + tableData);  //load the data variable as an object array

	table.append('<thead><tr></tr></thead>');
	var thead = $('thead tr', table);

	//create the table headers
	for (var propertyName in $(data)[0]) {
		thead.append('<th>' + propertyName + '</th>');
	}

	//add the table rows
	$(data).each(function (key, val) {
		table.append('<tr></tr>');
		var tr = $('tr:last', table);
		for (var propertyName in val) {
			tr.append('<td>' + val[propertyName] + '</td>');
		}
	});
}