localStorage的跨与实现方案

实现原理：

HTML5 的 postMessage 为解决跨域页面通信提供了一套可控的机制， 而 localStorage 则提供了易用简洁的本地存储方案？ 这两者结合起来，能否实现跨域的本地存储呢 ？

答案是可以的。假设有 a.com 和 b.com 两个页面。我们想通过 a 页面去修改 b 页面的本地数据。 我们需要做如下步奏：

• 在 a 页面创建一个 iframe ，嵌入 b 页面
• a 页面通过 postMessage 传递指定格式的消息给 b 页面
• b 页面解析 a 页面传递过来的消息内容，调用localStorage API 操作本地数据
• b 页面包装 localStorage 的操作结果，并通过 postMessage 传递给 a 页面
• a 页面解析 b 页面传递回来的消息内容，得到 localStorage 的操作结果

下面简单的实现一下：

在A页面：

/*
API:
csclient.get("http://b.test.com","name",callback);
csclient.set("http://b.test.com","name","chenjian",callback);
csclient.del("http://b.test.com","name",callback);
*/
var csclient = (function () {
    var _get = function (url,key,fn) {
        var value = {
            _key ：key,
            _method : "get"
        };
        getIframeWindow(url).postMessage(value,url);
        //给window对象绑定message事件处理
        addEvent(handMessage)
    }

    var _set = function (url,key,value,fn) {
        var _value = {
            _key : key,
            _vaule ：value,
            _method : "set"
        };
        getIframeWindow(url).postMessage(_vaule,url);
        //给window对象绑定message事件处理
        addEvent(handMessage)  
    }

    var _del = function () function (url,key,fn) {
        var value = {
            _key ：key,
            _method : "del"
        };
        getIframeWindow(url).postMessage(_vaule,url);
        //给window对象绑定message事件处理
        addEvent(handMessage)
    }

    function getIframeWindow (url) {
        var _iframe = document.createElement("iframe");
        _iframe.src = url;
        _iframe.style.display = "none";
        window.body.appendChild(_iframe);
        var iframeWindow = _iframe.contentWindow;
        return iframeWindow;
    }
    function addEvent(func) {
        if (window.addEventListener) {
            window.addEventListener("message", func, false);
        }else{
            window.attachEvent("onmessage", func);
        }  
    }
    function handMessage (event) {
        var event = event || window.event;
        //验证是否来自预期内的域，如果不是不做处理，这样也是为了安全方面考虑
        if(event.origin === url){
            //处理传过来的数据；
            fn(event.data);
        }
    }
    return {
        get : _get,
        set : _set,
        del : _del
    }
})();

在B页面：

/*
API:
cshub.init("http://a.test.com");
*/
var cshub = (function () {
    var _cshub = function (url) {
        addEvent(handMessage);
        function handMessage(event) {
            var event = event || window.event;
            //验证是否来自预期内的域，如果不是不做处理，这样也是为了安全方面考虑
            if(event.origin === url){
                if(event.data._method=="get") {
                    getFn(event.data._method)
                }else if (event.data._method=="set") {
                    setFn(event.data._method)
                }else {
                    delFn(event.data._method)
                }
            }
        }
        function addEvent(func) {
            if (window.addEventListener) {
                window.addEventListener("message", func, false);
            }else{
                window.attachEvent("onmessage", func);
            }  
        }
        
        function getFn (data) {
            window.parent.postMessage(window.localStorage["data._key"],url);
        }

        function setFn (data) {
            window.localStorage["data._key"] = data._value;
            window.parent.postMessage("设置成功");
        } 

        function delFn (data) {
            window.localStorage.removeItem("data._key");
            window.parent.postMessage("删除成功");
        }
    }
    return {
        init : _cshub
    };
})();

上面的代码徒手写的没做测试，如果有误还望指出。谢谢