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', function () { storage.set(key.val(), value.val()); }) .on('click', '#load', function () { storage.get(key.val()); }) .on('click', '#clear', function () { storage.clear(); }); });
<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>