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页面：

 1 /*
 2 API:
 3 csclient.get("http://b.test.com","name",callback);
 4 csclient.set("http://b.test.com","name","chenjian",callback);
 5 csclient.del("http://b.test.com","name",callback);
 6 */
 7 var csclient = (function () {
 8     var _get = function (url,key,fn) {
 9         var value = {
10             _key ：key,
11             _method : "get"
12         };
13         getIframeWindow(url).postMessage(value,url);
14         //给window对象绑定message事件处理
15         addEvent(handMessage)
16     }
17
18     var _set = function (url,key,value,fn) {
19         var _value = {
20             _key : key,
21             _vaule ：value,
22             _method : "set"
23         };
24         getIframeWindow(url).postMessage(_vaule,url);
25         //给window对象绑定message事件处理
26         addEvent(handMessage)
27     }
28
29     var _del = function () function (url,key,fn) {
30         var value = {
31             _key ：key,
32             _method : "del"
33         };
34         getIframeWindow(url).postMessage(_vaule,url);
35         //给window对象绑定message事件处理
36         addEvent(handMessage)
37     }
38
39     function getIframeWindow (url) {
40         var _iframe = document.createElement("iframe");
41         _iframe.src = url;
42         _iframe.style.display = "none";
43         window.body.appendChild(_iframe);
44         var iframeWindow = _iframe.contentWindow;
45         return iframeWindow;
46     }
47     function addEvent(func) {
48         if (window.addEventListener) {
49             window.addEventListener("message", func, false);
50         }else{
51             window.attachEvent("onmessage", func);
52         }
53     }
54     function handMessage (event) {
55         var event = event || window.event;
56         //验证是否来自预期内的域，如果不是不做处理，这样也是为了安全方面考虑
57         if(event.origin === url){
58             //处理传过来的数据；
59             fn(event.data);
60         }
61     }
62     return {
63         get : _get,
64         set : _set,
65         del : _del
66     }
67 })();

在B页面：

 1 /*
 2 API:
 3 cshub.init("http://a.test.com");
 4 */
 5 var cshub = (function () {
 6     var _cshub = function (url) {
 7         addEvent(handMessage);
 8         function handMessage(event) {
 9             var event = event || window.event;
10             //验证是否来自预期内的域，如果不是不做处理，这样也是为了安全方面考虑
11             if(event.origin === url){
12                 if(event.data._method=="get") {
13                     getFn(event.data._method)
14                 }else if (event.data._method=="set") {
15                     setFn(event.data._method)
16                 }else {
17                     delFn(event.data._method)
18                 }
19             }
20         }
21         function addEvent(func) {
22             if (window.addEventListener) {
23                 window.addEventListener("message", func, false);
24             }else{
25                 window.attachEvent("onmessage", func);
26             }
27         }
28
29         function getFn (data) {
30             window.parent.postMessage(window.localStorage["data._key"],url);
31         }
32
33         function setFn (data) {
34             window.localStorage["data._key"] = data._value;
35             window.parent.postMessage("设置成功");
36         }
37
38         function delFn (data) {
39             window.localStorage.removeItem("data._key");
40             window.parent.postMessage("删除成功");
41         }
42     }
43     return {
44         init : _cshub
45     };
46 })();

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