跨域的localstorage

最新推荐文章于 2024-01-26 16:32:21 发布

iteye_12132

最新推荐文章于 2024-01-26 16:32:21 发布

阅读量1.7k

点赞数

分类专栏： JavaScript 文章标签： html5 localstorage JavaScript ViewUI

JavaScript 专栏收录该内容

117 篇文章 0 订阅

订阅专栏

IE6/7不支持，其它浏览器ok。

[b]1. 有个代理页面，放在公共的域名下。[/b]


<!DOCTYPE html>
<!-- Copyright 2010 Nicholas C. Zakas. All rights reserved. BSD Licensed. -->
<!-- modified by wushufeng 2014-07-01. -->
<html>
<meta charset="UTF-8">
<body>
<script type="text/javascript">
(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);
    }
})();
</script>
</body>
</html>

[b]2. 调用的页面，引入js。[/b]


/*
	 * 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];
	        }
	    }

	};
}

[b]3.调用方式[/b]



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

iteye_12132

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
跨域的localstorage

IE6/7不支持，其它浏览器ok。[b]1. 有个代理页面，放在公共的域名下。[/b][code="html"](function(){ function handleRequest(event){ try{ var data = JSON.parse(event.data); var storage...
复制链接

扫一扫

专栏目录