JSFiddle - React, Tailwind, and code Playground

by Derek Anderson

JavaScript

enyo.kind({
		name: "LocalStorageSource",
		kind: "enyo.Source",
		//* Uses "GET" method.
		fetch: function (rec, opts) {
            if(opts.euid || rec.euid && !rec.records) {
                //fetch a record
                var _rec = JSON.parse(localStorage.getItem(opts.euid));
                rec.euid = opts.euid;
                rec.isNew = false;
                rec.setObject(_rec);
            } else {
                //fetch collection based on kindName passed, 
                //or model attached to collection
                var model = opts.kindName || new rec.model().kindName;
                rec.removeAll();
                for (var i = 0; i < localStorage.length; i++){
                    var localKey = localStorage.key(i);
                    if(model === localKey.substr(0, model.length)){
                        var euid = localKey.substr(model.length + 1);
                        var _rec = JSON.parse(localStorage.getItem(localKey));
                        var _model = new rec.model().setObject(_rec);
                        _model.euid = euid;
                        rec.add(_model);
                    };
                }
            }
        },
		//* Uses "POST" method if the record is new; otherwise, "PUT".
		commit: function (rec, opts) {
            rec.isNew = false;
            var key = rec.kindName + "_" + rec.euid
            localStorage.setItem(key, rec.toJSON());
		},
		//* Uses "DELETE" method.
		destroy: function (rec, opts) {
            var euid = opts.euid || rec.euid;
			localStorage.removeItem(euid);
		},
});

enyo.kind({
    name: "TestStore", 
    kind: "enyo.Store",
    sources: {local: "LocalStorageSource"}
});

enyo.kind({
    name: "TestModel",
    kind: "enyo.Model",
    defaultSource: "local",
    defaults:{
        message: "hello"
    }
});

enyo.kind({
    name: "TestCollection",
    kind: "enyo.Collection",
    model: "TestModel",
    defaultSource: "local",
});
enyo.store.addSources({local:...