Web front-end Interview Guide (34): How to achieve communication between multiple tabs in a browser?

Topic Comments

The main study of data storage knowledge, data storage has local and server storage two ways, for front-end development, only need to explain the way to solve the local storage. Of course, you can know the server side of the way better. The difficulty of the subject is general, as long as can say the idea can, at least two ways to solve.

Methods of solving problems

method One: Use Localstorage

Use Localstorage.setitem (key,value); Add content

Use the storage event to listen for actions that you add, modify, and delete

Window.addeventlistener ("Storage", function (event) {
        $ ("#name"). val (event.key+ "=" +event.newvalue);
});
 

Method two, use Cookie+setinterval

HTML code

<inputid= "name" ><input type= "button" id= "Btnok" value= "Send" >

JS Code-Page 1

$ (function () {
        $ (' #btnOK '). Click (function () {
            varname=$ ("#name"). Val ();
            Document.cookie= "Name=" +name;});
    

JS Code-Page 2

    Gets the contents of the cookie Day
    function Getkey (key) {return
        json.parse ("{\" + document.cookie.replace (/;\s+/gim, "\", \ ""). Replace (/=/GIM, "\": \ "") + "\"}) [key];
    }
    Gets the contents of the cookie every 1 seconds
    setinterval (function () {
        Console.log (getkey ("name"));
     },1000);