`
mutongwu
  • 浏览: 449876 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

跨域的localstorage

html5localstorageJavaScript 
阅读更多
IE6/7不支持，其它浏览器ok。


1. 有个代理页面，放在公共的域名下。 
<!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>


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);
});
分享到：
| 日期解析函数
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    cross-domain-storage:跨域localStorage

    允许跨域共享本地存储。 使用主机授予对本地存储的访问权限。 使用来宾来访问主机上的本地存储。安装npm我跨域存储用法主持人var createHost = require ( 'cross-domain-storage/host' ) ;主机（allowedDomains） ...

    如何使用localstorage代替cookie实现跨域共享数据问题

    主要介绍了如何使用localstorage代替cookie实现跨域共享数据问题，本文给大家带来了实现方案，使用postmessage和localstorage进行数据跨域共享问题，感兴趣的朋友一起看看吧

    storage-es6:ES6跨域localStorage

    扩展-es6 CrossDomainStorage ES6 实现安装 $ bower install --save zheneva/storage-es6运行示例 $ git clone git@github.com:zheneva/storage-es6.git$ npm install $ gulp应用程序接口 storage ....

    localStorage，sessionStorage的使用

    localStorage和sessionStorage是前端开发中常用的Web存储API，它们为开发者提供了一种在客户端保存数据的方式。localStorage和sessionStorage在使用上有很多相似之处，但也存在关键性的差异。 ### localStorage的...

    跨域解决方案

    同源策略限制了很多东西，例如 Cookie、LocalStorage 和 IndexDB 无法读取，DOM 和 JS 对象无法获得，AJAX 请求不能发送。因此，我们需要解决跨域限制，常见的跨域解决方案有： 1. 通过 jsonp 跨域：jsonp 是一种...

    cookie使用，localStorage使用

    需要注意的是，localStorage的数据只存在于本地浏览器，不会跨域共享，而且用户可以在浏览器的开发者工具中查看和清除这些数据。 总结来说，Cookie适合存储少量、短期、需要在服务器端访问的数据，而localStorage则...

    基于jQuery的localStorage购物车.zip

    7. **跨域问题**：由于localStorage受到同源策略的限制，只能在同一个域名下读写数据。因此，如果这个购物车系统部署在多个子域名下，需要考虑如何共享购物车信息，可能需要用到cookie或其他跨域解决方案。 8. **...

    js跨域问题小结

    7. Storage共享：HTML5的`localStorage`和`sessionStorage`也支持跨文档共享，只要两个页面的源相同，就可以共享存储的数据。 了解这些跨域解决方案后，开发者可以根据实际需求选择合适的方法。在实际开发中，CORS...

    前端项目-backbone-localstorage.js.zip

    在实际应用中，开发者还需要考虑兼容性和跨域问题。 总的来说，`Backbone.LocalStorage`提供了一种简单而有效的方法，使`Backbone.js`应用能够利用浏览器的本地存储能力，实现数据的持久化，这对于构建离线优先或者...

    前端项目-localStorage.zip

    5. **安全与隐私**：`localStorage`数据是同源策略的，即只能访问同源（协议+域名+端口）的数据，这有助于保护用户隐私，但也限制了跨域数据共享。 6. **polyfill**：通过JavaScript代码模拟浏览器原生API，使得旧...

    vue中axios实现数据交互与跨域问题

    const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = token; } return config; }, error =&gt; { return Promise.reject(error); } ); // 响应拦截器 instance....

    web前端跨域取JSON

    而HTML5的新特性如离线存储、Web Storage（localStorage和sessionStorage）、Web Workers等，也有助于优化跨域取JSON的数据处理和用户体验。 对于初学者来说，可以从以下几个步骤入手： 1. 学习HTML5和CSS3的基础...

    origin-storage:跨域访问的同源存储（IndexedDBWebSQLlocalStorage）

    一个用于跨域访问的同源存储，它基于localForage，并支持IndexedDB，WebSQL和localStorage。 origin-storage在不支持IndexedDB或WebSQL的浏览器中使用localStorage。 并且不支持Safari。 目录 动机 当不同的网站域...

    iframe-localstorage

    为了解决这个限制，我编写了这个简单的库，它使用功能也可以在跨域框架中使用 localStorage。 为了使用它，在父窗口中包含 parent.js 文件和在嵌套窗口中包含 iframe.js 文件就足够了。 iframe.js 文件覆盖 ...

    跨域共享session （实现http跳转https 共享session）

    5. **HTML5的Storage**：使用localStorage或sessionStorage存储用户标识，然后在新的域上通过Ajax请求验证该标识，从而实现跨域登录状态的同步。 **二、实现HTTP跳转HTTPS共享session** 1. **SSL/TLS配置**：确保...

    HTML5 LocalStorage和UserData实现兼容多浏览器的本地存储

    与LocalStorage类似，UserData也采用键值对存储，但它没有跨域限制，且存储容量相对较小（约64KB）。 使用UserData的基本步骤包括： 1. 创建一个DOM元素，如`&lt;div&gt;`，并为其设置`userData`属性。 2. 使用`...

    跨域图片资源权限(CORS enabled image)

    5. 使用toDataURL()方法将canvas内容转换为数据URL，然后将其存储到localStorage中。 浏览器兼容性方面，现代主流浏览器如Chrome、Firefox、Opera和Safari都支持设置crossorigin属性的图片资源加载。不过，具体的...

    跨域问题详解

    1. **Cookie、LocalStorage和IndexDB无法获取**：这意味着如果尝试从一个非同源的页面读取或设置Cookie等本地存储信息，将会失败。 2. **DOM无法获取**：如果尝试从一个非同源的页面读取或修改DOM元素，也会受到限制...

    一种更好的方法来使用localStorage和sessionStorage

    3. **错误处理**: 考虑到跨域、浏览器限制或用户隐私设置，可能出现存储失败的情况。因此，我们需要添加适当的错误处理机制，如try-catch语句，确保在出现问题时能优雅地处理。 4. **数据版本控制**: 随着应用的...

Magicbox
Global site tag (gtag.js) - Google Analytics