HTML5 Storage API

by essoduke chang

HTML

<p>Usage: </p>
  <div>
    // set store engine, default use localStorage.<br />
    storage.engine('engine name, session or local');<br />
    e.g. storage.engine('session'); // using sessionStorage.
    <p>// set item <br />
      storage.set(key, value); </p>
    <p>// get item<br />
      storage.get(key);</p>
    <p>// clear engine<br />
      storage.clear();<br />
        // You may change the engine first then clear data.<br />
        storage.engine('local');<br />
    storage.clear();</p>
  </div>
  <hr />
<p>
	Engine:
    <label><input type="radio" name="engine" value="session" /> sessionStorage</label>
    <label><input type="radio" name="engine" value="local" checked /> localStorage</label>
	<br />
	<label><input type="text" name="key" placeholder="Key" /></label>
    <label><input type="text" name="value" placeholder="Value" /></label>
    <button id="save">Save</button>
	<button id="load">Load</button>
	<button id="clear">Clear</button>
  </p>
  <textarea id="result" cols="70" rows="10"></textarea>

JavaScript

var storage = (function () {
	'use strict';
	// Check the Storage API was supported by the browser.
	if (!(window.localStorage && window.sessionStorage)) {
		return false;
	}
	/**
	 * set the default storage engine
	 * @private
	 */
	var _engine = window.localStorage;
	var _engine_name = 'localStorage';
	var _log = function (msg) {
		$('#result').val($('#result').val() + msg);
	};

	// Public functions
	return {
		/**
		 * Change the storage engine
		 * @param type {string} set `local` or `session` then switch the engine to `localStorage` or `sessionStorage`
		 */
		engine: function (type) {
			switch (type) {
				case 'session': _engine = window.sessionStorage; _engine_name = 'sessionStorage'; break;
				case 'local': _engine = window.localStorage; _engine_name = 'localStorage'; break;
			}
			_log('Change Engine to ' + _engine_name + '.\r\n');
            return this;
		},
		/**
		 * Save item of the engine
		 * @param key {string} Key of storage
		 * @param value {string} If the value is undefined then remove the item
		 * @return {bool} Successed or Failed
		 */
		set: function (key, value) {
			key ? ((null !== value && undefined !== value) ? _engine.setItem(key, value) : _engine.removeItem(key)) : null;
			_log('Set Key: ' + key + ', Value: ' + value + '\r\n');
			// confirm the value has been set correctly.
			return _engine.getItem(key) === value;
		},
		/**
		 * Get item of the engine
		 * @param key {string} Key of storage
		 * @return {string}
		 */
		get: function (key) {
			_log('Get Key: ' + key + ', Value: ' + _engine.getItem(key) + '\r\n');
			return key ? _engine.getItem(key) : null;
		},
		/**
		 * Clear items of engine
		 */
		clear: function () {
			_log('Clear data of ' + _engine_name + '\r\n');
			_engine.clear();
		}
	};
}());

$(function () {

	var key = $('input[name=key]');
	var value = $('input[name=value]');

	$('body')
		.on('change', 'input[name=engine]', function () {
			storage.engine(this.value);
		})
		.on('click', '#save',...