Yep, HTML5’s new localStorage and sessionStorage functionality is great, you can store information you want client side, meaning you don’t have to transfer the data via XHRs to the server, or store it in cookies, or in flash storage to keep it between page views.

There is one downside however. Objects, you can’t store them. It only accepts strings, thus I did what everyone’s doing, used JSON to store the object in storage. This however is a bit, well, annoying. You’ve got to remember all the time to run a JSON.parse or JSON.stringify on the data your using or you’ll simply loose it without any errors being thrown

This lead me to simply write a wrapper for both types of storage so I didn’t have to remember wherever I was using them.

Here’s the source also available in a gist on github:

if (typeof HTML5 == 'undefined') {
	var HTML5 = {};
}
/**
 * Wrapper class to deal with easily storing values in local storage
 * without having to constantly use JSON.parse and JSON.stringify everywhere
 * you want to save an object.
 *
 * @param {String} index the base index to use in the localStorage global object
 * @author Tom Chapman
 */
HTML5.localStorage = function(index)
{
	/**
	 * @type {Mixed}
	 * @private
	 */
	var localValues;

	/**
	 * @type {String}
	 * @private
	 */
	var localIndex;

	/**
	 * Class level constructor
	 *
	 * @constructor
	 * @param {String} index
	 * @private
	 */
	var __init = function(index) {
		if (typeof index != 'string' || index === null) {
			throw new Error('A string index must be provided to HTML5.localStorage');
		}
		localIndex = index;
		var currentLocalValue = localStorage.getItem(index);
		if (typeof currentLocalValue != 'undefined' && currentLocalValue !== null) {
			try {
				localValues = JSON.parse(currentLocalValue);
			} catch (err) {
				localValues = currentLocalValue;
			}
		} else {
			localValues = {};
		}
	}(index);

	return {
		/**
		 * Returns all vars or index from the localValues
		 *
		 * @param {String} [index] the index inside the object in use
		 * @return {Mixed}
		 */
		get: function(index) {
			return (typeof index == 'undefined')
					? localValues
					: ((typeof localValues[index] != 'undefined')
							? localValues[index]
							: null);
		},

		/**
		 * Set localValues or an index in localValues
		 *
		 * @param {Mixed} value the value to assign to the object, or if index provided the index inside the object
		 * @param {String} [index] the index inside the object in use
		 * @return {Mixed}
		 */
		set: function(value, index) {
			if (typeof index == 'undefined' || index === null) {
				localValues = value;
			} else {
				if (typeof localValues != 'object') {
					throw new Error();
				}
				localValues[index] = value;
			}
			localStorage.setItem(localIndex, (typeof localValues != 'string' && typeof localValues != 'number')
													? JSON.stringify(localValues)
													: localValues);
		},

		/**
		 * Removes either the whole object from the localStorage or the index provided
		 *
		 * @param {String} [index] the index inside the object in use
		 */
		remove: function(index) {
			if (typeof index == 'undefined') {
				localStorage.removeItem(localIndex);
			} else if (typeof localValues[index] != 'undefined') {
				delete localValues[index];
				localStorage.setItem(localIndex, (typeof localValues != 'string' && typeof localValues != 'number')
													? JSON.stringify(localValues)
													: localValues);
			}
		}
	};
};

if (typeof HTML5 == 'undefined') {
	var HTML5 = {};
}
/**
 * Wrapper class to deal with easily storing values in session storage
 * without having to constantly use JSON.parse and JSON.stringify everywhere
 * you want to save an object.
 *
 * @param {String} index the base index to use in the localStorage global object
 * @author Tom Chapman
 */
HTML5.sessionStorage = function(index)
{
	/**
	 * @type {Mixed}
	 * @private
	 */
	var sessionValues;

	/**
	 * @type {String}
	 * @private
	 */
	var sessionIndex;

	/**
	 * Class level constructor
	 *
	 * @constructor
	 * @param {String} index
	 * @private
	 */
	var __init = function(index) {
		if (typeof index != 'string' || index === null) {
			throw new Error('A string index must be provided to HTML5.sessionStorage');
		}
		sessionIndex = index;
		var currentLocalValue = sessionStorage.getItem(index);
		if (typeof currentLocalValue != 'undefined' && currentLocalValue !== null) {
			try {
				sessionValues = JSON.parse(currentLocalValue);
			} catch (err) {
				sessionValues = currentLocalValue;
			}
		} else {
			sessionValues = {};
		}
	}(index);

	return {

		/**
		 * Returns all vars or index from the sessionValues
		 *
		 * @param {String} [index] the index inside the object in use
		 * @return {Mixed}
		 */
		get: function(index) {
			return (typeof index == 'undefined')
					? sessionValues
					: ((typeof sessionValues[index] != 'undefined')
							? sessionValues[index]
							: null);
		},

		/**
		 * Set sessionValues or an index in sessionValues
		 *
		 * @param {Mixed} value the value to assign to the object, or if index provided the index inside the object
		 * @param {String} [index] the index inside the object in use
		 * @return {Mixed}
		 */
		set: function(value, index) {
			if (typeof index == 'undefined' || index === null) {
				sessionValues = value;
			} else {
				if (typeof sessionValues != 'object') {
					throw new Error();
				}
				sessionValues[index] = value;
			}
			sessionStorage.setItem(sessionIndex, (typeof sessionValues != 'string' && typeof sessionValues != 'number')
													? JSON.stringify(sessionValues)
													: sessionValues);
		},

		/**
		 * Removes either the whole object from the sessionStorage or the index provided
		 *
		 * @param {String} [index] the index inside the object in use
		 */
		remove: function(index) {
			if (typeof index == 'undefined') {
				sessionStorage.removeItem(sessionIndex);
			} else if (typeof sessionValues[index] != 'undefined') {
				delete sessionValues[index];
				sessionStorage.setItem(sessionIndex, (typeof sessionValues != 'string' && typeof sessionValues != 'number')
													? JSON.stringify(sessionValues)
													: sessionValues);
			}
		}
	};
};