A cookie is communication between multiple browser tabs

principle:

　　A cookie is a browser-side storage vessel, and it is multi-page sharing , multi-page using cookie shared characteristics, may be implemented plurality of tabs in communication.

　　For example: a tab sends a message (the message is set to the cookie), a tab receiving a message (Get message from the cookie)

example:

01 Send message tab (in fact, the message will be sent to set a cookie )

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
</head>
<body>
                        <!- ->This page is used to send (set the value of the cookie) Information  
      < INPUT type = "text" ID = 'MSG1' > < br >    <-! Input box MSG1 -> 
      < INPUT type = "text" ID = 'Msg2' > < br >    <-! Input box Msg2 - -> 
      < the button the above mentioned id = "send" > send </ the button >      <-! click the send button to send the trigger event -> 
      < Script > 
            send.onclick = function () {
                   IF (msg1.value.trim()!=='' && msg2.value.trim () ! == '' ) {   // If the content msg1 and msg2 is not empty, execution if statement 
                        the document.cookie = ' msg1 = ' + msg1.value.trim ();        // a value msg1 and msg2 placed the cookie (assigned to a cookie) 
                        the document.cookie = ' msg2 = ' + msg2.value.trim ();        // cookie value = format MSG 
                  }                                                       // because the value of the cookie is shared multi-page , the tab can be realized by value 
            
            } 
      </ Script > 
</ body >
</html>

02 to receive the message tab (in fact, to get messages from the cookie and displayed on the page)

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
</head>
<body>
                  <!- ->This page is used to receive information (acquisition value of the cookie)
      < H1 of > receive the message: < span ID = "recMsg1"  > </ span > </ h1 of > 
      < h1 of > receive the message: < span ID = "recMsg2"  > </ span > </ h1 of > 
      < Script > 
           
                  / / Get cookie method the document.cookie 
                  // 01 in the cookie value MSG1 = hellwo; msg2 = word string format into json { "MSG1": "hellwo", "Msg2": "Word"} 

                  function getKey (Key ) {
                         var obj = ' { "'+document.cookie.replace(/ = / G, ' ":" ' ) .replace ( / ; \ + S / G, ' "," ' ) + ' "} ' 
                        var Cookies = the JSON.parse (obj) // 02 the string to json Object 
                        return Cookies [Key] 
                        
                  } 
                  setInterval (() => { // join timer, so that the function is called once every second, to achieve a page refresh 
                        recMsg1.innerHTML = getKey ( " msg1 " ) // value is set to msg1 at page recMsg1
                        recMsg2.innerHTML = getKey ( " msg2 " ) // the value is set to msg2 recMsg2 at page 
                  }, 1000 ); 
            
                  
                  

                  
            
      </ Script > 

</ body > 
</ HTML >

A cookie is communication between multiple browser tabs

Guess you like