StoreFront - A wrapper for store-js adding both local variable usage, and schema/default value definition.

README.md

StoreFront

What?

StoreFront allows users to set a schema/default values for store.js.

StoreFront also acts as a buffer between store.js and your application. All your '''get()''' queries access a synced object instead of constantly utilizing the browser's storage API. In theory, this should speed up performance when data is accessed frequently.

Why?

StoreFront allows users to easily store and retrieve key pair values, while store-js maintains and restores the data for later sessions. If store-js is not found, StoreFront functions the same, but without leveraging the browser's local storage features.

Defining 'defaults' object also defines a psedo-schema. Upon instantiation, StoreFront detects changes to this schema and removes any depreciated keys stored locally. This allows store.js' data to stay clean, as you alter your softwares "schema" in later versions.

Dependencies

store.js

How?

See 'example.js'

example.js

// StoreFront.js example usage

// Define your defaults during instantiation.
// StoreFront will detect and update your store-js data to reflect your current "schema"
// Currently, only changes to the first layer will be detected
var defaults = {
    userName : "Bob",
    enableTooltips : true,
    enableEditing: false,
    fgColor : [3,56,233],
    bgColor : [255,255,225],
    brushes : {
        pencil : {
            size : 3,
            blur : 0,
            alpha : 100
        },
        eraser : {
            size : 10,
            blur : 0,
            alpha : 100
        }
    }
};

// Instantiate
var options = new StoreFront(defaults);

// List Current Options
var all = options.getAll();
console.log(all);

// Update an option's value
options.set('fgColor', [123,24,26]);

// Setting properties which are not within the 'defaults' object will work, but will not be stored.
options.set('userPhone', '555-5555');

var fgColor = options.get('fgColor');
var pencil = options.get('brushes').pencil;
var eraserSize = options.getAll().brushes.eraser.size;
var phone = options.get('userPhone');

console.log(fgColor, pencil, eraserSize, phone);

StoreFront.js

/*jslint
browser: true, devel: true, plusplus: true, unparam: true, todo: true, vars: true, white: true
*/

/*global store */

var StoreFront = function (defaults) { "use strict";
    var store = window.store || {},
        _local = {},
        _defaults = defaults || {},
        
        _set = function (prop, value) {
            _local[prop] = value;
            if (store.enabled && _defaults.hasOwnProperty(prop)) store.set(prop, value);
        },

        _get = function (prop) {
            return _local[prop];
        },

        _getAll = function () {
            return _local;
        },

        _remove = function (prop) {
            delete _local.prop;
            if (store.enabled) store.remove(prop);
        },

        _reset = function () {
            var prop;
            for(prop in _defaults) {
                if(_defaults.hasOwnProperty(prop)) {
                    _set(prop, _defaults[prop]);
                }
            }
        },

        _init = function () {
            var stored, prop;
          
            if (!store.enabled) {
                console.log('Store.js not found.  Session options will not be saved.');
                _local = JSON.parse(JSON.stringify(_defaults));
            } else {
                // Sync
                _local = store.getAll();

                // Store new default property
                // Note: only first layer properties are detected)
                for(prop in _defaults) {
                    if (_defaults.hasOwnProperty(prop) && !_local.hasOwnProperty(prop)) {
                        console.log('New property: ', prop);
                        _set(prop, _defaults[prop]);
                    }
                }
                // Remove depreciated defaults
                // Note: only first layer properties are detected)         
                for(prop in _local) {
                    if(_local.hasOwnProperty(prop) && !_defaults.hasOwnProperty(prop)) {
                        console.log('Depreciated property: ', prop);
                        _remove(prop);
                    }
                }

                // Sync Again after changes
                _local = store.getAll();
            }          
        };

    _init();

    return {
        get : _get,
        getAll : _getAll,
        set : _set,
        reset : _reset
    };
};