HTML and CSS Reference
In-Depth Information
property of each object held for that type (the rows in the table), and the value will be the
object persisted. This approach relies on the fact that the
id
property of each object must be
unique within its type.
The storage engine needs to generate unique IDs for objects. The approach we will use with
the Web storage API is to use the current time in milliseconds. This is not a great choice
for an
id
, since if two objects could be created in quick enough succession they will get the
same
id
. A better approach is to use UUIDs (Universally Unique Identifiers), but we will
avoid that complexity for now.
//
The most commonly used JavaScript implementation of UUIDs can be found
here:
In order to obtain the current time in milliseconds we can use the jQuery helper:
> $.now()
The storage engine will be represented by a module. This will not have any dependencies
to other code developed for the tasks screen, therefore it is completely reusable by other
functionality if required. The module will be stored in a variable called storageEngine.
The storageEngine will be initialized when the tasks.html page loads, and will be available
for use by the tasksController, or any other JavaScript code, since the storageEngine vari-
able is bound to the global
window
object.
Begin by creating a JavaScript file called tasks-webstorage.js in the scripts folder. Next,
import this into tasks.html:
<script src="scripts/tasks-webstorage.js"></script>
The code below is the initial version of the storageEngine module. This provides the basic
structure for the module, along with implementations of init and initObjectStore:
storageEngine = function() {
var initialized = false;
var initializedObjectStores = {};
return {
init : function(successCallback, errorCallback) {
