Hybrid View

  1. #1
    Ext JS Premium Member devtig's Avatar
    Join Date
    Jan 2010
    Location
    Rotterdam, The Netherlands
    Posts
    389
    Vote Rating
    13
    devtig will become famous soon enough

      1  

    Default Ext.ux.state.WindowNameProvider a (session) cookie alternative

    Ext.ux.state.WindowNameProvider a (session) cookie alternative


    You're wondering why your cross-domain iframed web app using cookies works everywhere, except in Safari? By default Safari only allows cookies from sites you navigate to directly. So, you're out of luck with using cookies this time, but fear not.

    You've probably already read about the window.name alternative to cookies. Whatever string page a.html sets in window.name, page b.html can read and update. Cross domain and as long as the tab stays open. A few small libraries for using window.name have been written already, but none specifically for Ext JS.

    Here's an Ext JS 4 state provider implementation that saves and retrieves state as JSON in window.name. Because everybody likes window.name this implementation allows your own namespace in window.name.

    Demo

    Code:
    /**
     * An Ext JS 4 state provider implementation that saves and retrieves state as JSON
     * in window.name. Because everybody likes window.name, this implementation
     * allows for the use of namespace.
     *
     * Example:
     *
     *     var wnp = Ext.create('Ext.ux.state.WindowNameProvider', {
     *         target:    top,
     *         namespace: 'myplace'
     *     });
     *
     *     Ext.state.Manager.setProvider(wnp);
     *
     *     wnp.set('a', 1); wnp.set('b', 2);
     *     console.log(top.name); //would output:
     *     {"myplace": {"a": 1, "b": 1}}
     *
     **/
    Ext.define('Ext.ux.state.WindowNameProvider', {
        extend: 'Ext.state.Provider',
    
        /**
         * @cfg {parent|top|window} target
         * The target whose name property is being written to.
         * This is useful only when you web app is iframed.
         * May be parent, top or window. Defaults to window. 
         */
    
        /**
         * @cfg {String} namespace
         * The name of the object where your values are stored.
         */
    
        /**
         * Creates a new WindowNameProvider.
         * @param {Object} [config] Config object.
         */
        constructor : function(config){
            var me = this;
            
            me.target = config.target || window;
            me.ns     = config.namespace || 'myplace';
            me.callParent(arguments);
            
            //read entire window.name string into object
            //state is only what's within the namespace property within that object
            me.state  = me.readTarget()[me.ns];
        },
    
        set : function(name, value){
            var me = this;
            //read entire window.name string into object
            var o = me.readTarget();
            //set property value into this instance namespace
            o[me.ns][name] = value;
            //write changed object as JSON string in window.name
            me.target.name = Ext.encode(o);
            //also sets this.state
            me.callParent(arguments);
        },
    
        clear : function(name){
            var me = this;
            //read entire window.name string into object
            var o = me.readTarget();
            //set property value to undefined into this instance namespace
            delete o[me.ns][name]; //only difference to the set method
            //write changed object as JSON string in window.name
            me.target.name = Ext.encode(o);
            //also sets this.state
            me.callParent(arguments);
        },
    
        // private
        readTarget : function(){
            var me = this, o;
            
            try {
                o = Ext.decode(me.target.name);
            } catch(e) {
                //create empty object
                o = {};
                
                //create namespace property within object
                o[me.ns] = {};
            }
            return o;
        }
    });


    Last edited by devtig; 15 Nov 2012 at 1:47 AM. Reason: link to demo

  2. #2
    Sencha Premium Member ajaxvador's Avatar
    Join Date
    Nov 2007
    Location
    PARIS, FRANCE
    Posts
    206
    Vote Rating
    0
    ajaxvador is on a distinguished road

      0  

    Default


    +1
    Vador

Thread Participants: 1

Tags for this Thread