Localstorage of the cross-and-implement scheme

Implementation principle:

HTML5 's PostMessage provides a manageable set of mechanisms for resolving cross-domain page communication, while Localstorage provides a simple, easy-to-use local storage solution. Together, is it possible to implement cross-domain local storage?

The answer is yes. Suppose there are two pages of a.com and B.Com. We want to modify the local data on page b through the A page. We need to do the following steps:

• Create an IFRAME on page A, embed B page
• A page passes the specified format message to page B via postMessage
• b page resolves the message content passed by page A, invokes the Localstorage API to manipulate local data.
• b page Wraps the result of the Localstorage and passes the postMessage to the a page
• A page to parse the content of the message passed back to the B page, get localstorage operation result

Here's a simple implementation:

on page 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 varCsclient = (function () {8     var_get =function(URL,KEY,FN) {9         varValue = {Ten _key:key, One_method: "Get" A         }; - Getiframewindow (URL). postMessage (Value,url); -         //binding a message event handler to a Window object the addevent (handmessage) -     } -  -     var_set =function(URL,KEY,VALUE,FN) { +         var_value = { - _key:key, + _vaule:value, A_method: "Set" at         }; - Getiframewindow (URL). postMessage (_vaule,url); -         //binding a message event handler to a Window object - addevent (handmessage) -     } -  in     var_del =function()function(URL,KEY,FN) { -         varValue = { to _key:key, +_method: "Del" -         }; the Getiframewindow (URL). postMessage (_vaule,url); *         //binding a message event handler to a Window object $ addevent (handmessage)Panax Notoginseng     } -  the     functionGetiframewindow (URL) { +         var_iframe = document.createelement ("iframe"); A_IFRAME.SRC =URL; the_iframe.style.display = "None"; + Window.body.appendChild (_iframe); -         varIframewindow =_iframe.contentwindow; $         returnIframewindow; $     } -     functionAddevent (func) { -         if(window.addeventlistener) { theWindow.addeventlistener ("message", Func,false); -}Else{WuyiWindow.attachevent ("OnMessage", func); the         }   -     } Wu     functionHandmessage (event) { -         varEvent = Event | |window.event; About         //Verify that it comes from the expected domain, and that it is for security reasons if it is not handled $         if(Event.origin = = =URL) { -             //processing the data passed over; - fn (event.data); -         } A     } +     return { the get: _get, - set: _set, $ del: _del the     } the})();

on page B:

1 /*2 API:3 cshub.init ("http://a.test.com");4 */5 varCshub = (function () {6     var_cshub =function(URL) {7 addevent (handmessage);8         functionHandmessage (event) {9             varEvent = Event | |window.event;Ten             //Verify that it comes from the expected domain, and that it is for security reasons if it is not handled One             if(Event.origin = = =URL) { A                 if(event.data._method== "Get") { - getfn (Event.data._method) -}Else if(event.data._method== "Set") { the setfn (Event.data._method) -}Else { - DELFN (Event.data._method) -                 } +             } -         } +         functionAddevent (func) { A             if(window.addeventlistener) { atWindow.addeventlistener ("message", Func,false); -}Else{ -Window.attachevent ("OnMessage", func); -             }   -         } -          in         functionGETFN (data) { -Window.parent.postMessage (window.localstorage["Data._key"],url); to         } +  -         functionSETFN (data) { thewindow.localstorage["Data._key"] =Data._value; *Window.parent.postMessage ("Set Success"); $         } Panax Notoginseng  -         functionDELFN (data) { theWindow.localStorage.removeItem ("Data._key"); +Window.parent.postMessage ("Delete succeeded"); A         } the     } +     return { - Init: _cshub $     }; $})();

The above code is written by hand without testing, if it is wrong to point out. Thank you

Localstorage of the cross-and-implement scheme