ドメイン間localstorage


詳細
IE 6/7はサポートされていません.他のブラウザokです.
1.パブリックドメイン名の下に配置されたプロキシページがあります.








(function(){
    function handleRequest(event){
    	try{
    		var data = JSON.parse(event.data);
    		var storage = localStorage; 

        	if(data.op === 'W'){ //   
        		storage.setItem(data.key,JSON.stringify(data.value));
            	event.source.postMessage(event.data, event.origin);
        	}else if(data.op === 'D'){ //  
        		storage.removeItem(data.key);
            	event.source.postMessage(event.data, event.origin);
        	}else if(data.op === 'X'){ //  
        		storage.clear();
            	event.source.postMessage(event.data, event.origin);
        	}else{//  :   
        		var value = JSON.parse(storage.getItem(data.key));
            	event.source.postMessage(JSON.stringify({id: data.id, key:data.key, value: value}), event.origin);
        	}
    	}catch(e){
    		event.source.postMessage(event.data, event.origin);
    	}
    }

    if(window.addEventListener){
        window.addEventListener("message", handleRequest, false);
    } else if (window.attachEvent){
        window.attachEvent("onmessage", handleRequest);
    }
})();




2.呼び出されたページは、jsを導入します.

/*
	 * Copyright 2010 Nicholas C. Zakas. All rights reserved.
	 * BSD Licensed.
	 * modified by wushufeng 2014-07-01
	 */
	YYPAY.XDStorage = function(origin, path){
	    this.origin = origin;
	    this.path = path;
	    this._iframe = null;
	    this._iframeReady = false;
	    this._queue = [];
	    this._requests = {};
	    this._id = 0;
	}
	
	YYPAY.XDStorage.prototype = {
	
		op:{
			WRITE: 'W',
			READ: 'R',
			DEL: 'D',
			CLEAR: 'X'
		},
	    //restore constructor
	    constructor: YYPAY.XDStorage,
	
	    //public interface methods
	
	    init: function(){
	
	        var that = this;
	
	        if (!this._iframe){
	            if (window.postMessage && window.JSON && window.localStorage){
	                this._iframe = document.createElement("iframe");
	                this._iframe.style.cssText = "position:absolute;width:1px;height:1px;left:-9999px;";
	                document.body.appendChild(this._iframe);
	
	                if (window.addEventListener){
	                    this._iframe.addEventListener("load", function(){ that._iframeLoaded(); }, false);
	                    window.addEventListener("message", function(event){ that._handleMessage(event); }, false);
	                } else if (this._iframe.attachEvent){
	                    this._iframe.attachEvent("onload", function(){ that._iframeLoaded(); }, false);
	                    window.attachEvent("onmessage", function(event){ that._handleMessage(event); });
	                }
	            } else {
	                throw new Error("Unsupported browser.");
	            }
	        }
	
	        this._iframe.src = this.origin + this.path;
	
	    },

	    getValue: function(key, callback){
	        this._toSend({
                key: key
            },callback);
	    },
	
	    setValue: function(key,value,callback){

	        this._toSend({
                key: key,
    			op:  this.op.WRITE,
    			value: value
            },callback);	
	    },
	    delValue: function(key,callback){
	        this._toSend({
                key: key,
    			op: this.op.DEL,
    			value: value
            },callback);	
	    },
	    clearValue: function(callback){
	        this._toSend({
    			op: this.op.CLEAR
            },callback);	
	    },
	    //private methods
	    
	    _toSend: function(params,callback){
	    	var data = {
	                request: {
	                    key: params.key,
	                    id: ++this._id,
	                    op: params.op,
	                    value: params.value
	                },
	                callback: callback
            };
	    	if (this._iframeReady){
	            this._sendRequest(data);
	        } else {
	            this._queue.push(data);
	        }   
	
	        if (!this._iframe){
	            this.init();
	        }	
	    },
	
	    _sendRequest: function(data){
	        this._requests[data.request.id] = data;
	        this._iframe.contentWindow.postMessage(JSON.stringify(data.request), this.origin);
	    },
	
	    _iframeLoaded: function(){
	        this._iframeReady = true;
	
	        if (this._queue.length){
	            for (var i=0, len=this._queue.length; i < len; i++){
	                this._sendRequest(this._queue[i]);
	            }
	            this._queue = [];
	        }
	    },
	
	    _handleMessage: function(event){
	        if (event.origin == this.origin){
	            var data = JSON.parse(event.data);
	            this._requests[data.id].callback && this._requests[data.id].callback(data.key, data.value);
	            delete this._requests[data.id];
	        }
	    }
	
	};
}


3.呼び出し方式


var remoteStorage = new YYPAY.XDStorage("http://auth.xx.com", "/extpub/proxy.html");
remoteStorage.getValue(this.key,function(key,value){
    console.log(value);
});