background

After page A processes the data on the page, it needs to be transferred to page B. Page B needs to process or request the data according to page A.

1. Transfer by URL

Page B is based on page A, which is opened through window.open or window.location and can put the data passed in the URL

After page B is opened, the data of page A can be obtained by taking url parameters to realize data transfer

//a.html
<script>
const data = "this data from page a"
window.local = "http://localhost:3000/b.html? data=" + data
</script>

//b.html
<script>
function get_url(name) {
    let reg = new RegExp("(^ | &)" + name + "= (/ ^ & *) (& | $)"."i");
    let r = window.location.search.substr(1).match(reg);
    if(r ! =null) {
        return decodeURIComponent(r[2]);
    };
    return null;
 }
 let data = get_url("data")
 console.log(data)  //this data from page a
</script>
Copy the code

The disadvantages of this approach are obvious: the LENGTH of the URL is limited, and an error will be reported if the length is exceeded (414).

2. Through the postMessage

PostMessage can send messages to specified Windows by writing Windows to listen for Message events

//a.html
<iframe id="iframe" src="b.html" onload="load()" />
function load () {
  const iframe = document.getElementById("iframe").contentWindow
  iframe.postMessage("this data from page a"."/")  // The first argument is the data, and the second argument is the source of the target window
  window.onmessage = e= > {  // Listen for message events
    console.log(e.data)
  }
}
// HTML is embedded in the iframe of a page
window.onmessage = e= > {
  console.log(e.data)    // This data will be printed in page A's window, but page B will receive this data from page A
}
// The same principle applies to opening Windows through open. Window.open returns an object
// Send to opener through this object (wait until opener opens and loads)
Copy the code

3. Through the localStorage

LocalStorage follows the same origin policy and is also persistent. The same origin page is set and the entire source page can be accessed

SessionStorage is not used because sessionStorage cannot be accessed even if the same source window (TAB page) is different

//a.html (http://localhost:3000/a.html)
localStorage.setItem("a"."this is a")
//b.html (http://localhost:3000/b.html)
const data = localStorage.getItem("a")
console.log(data)  //this is a
Copy the code

4. Use Web SharedWorker

SharedWorker is a constructor that creates a shared Web worker that executes a script at the specified URL (click to jump to MDN)

The content of the same script can be shared by different Windows or tabs of SharedWorker

Create a separate file (worker.js) to write url scripts

//worker.js
let data = ""
onconnect = e= > {  // the onConnect event listens for the connection of the page (thread)
  const port = e.ports[0]
  port.start()
  port.onmessage = e= > {
    if(e.data === "get"){
      port.postMessage("data")    // Send a message to a page (thread) that listens for message through port
    } else {
      data += e.data
    }
  }
}
//a.html
<button onclick="triggle()"</button>let w = null;
if(! w) { w =new SharedWorker("./worker.js")    // Specify the URL script, which is placed at the same level as a.html
  w.port.start()    / / the connection
}
let port = w.port
port.onmessage = function (e) {    // Listen for messages sent by worker scripts
  console.log(e.data)
}
function triggle () {
  port.postMessage("A page modification")    // Send information to the worker script
}
//b.html
<button onclick="triggle()"</button>let w = null;
if(! w) { w =new SharedWorker("./worker.js")
  w.port.start()
}
let port = w.port
port.onmessage = function (e) {
  console.log(e.data)  // If page A clicks the button and page B gets it, page A changes will be printed
}
function triggle () {
  port.postMessage("A page modification")}Copy the code

SharedWorker starts another thread independently of the JS thread and executes in the background without affecting the main thread.

All pages (threads) connected to the same URL script through SharedWorker can send and receive worker data, but these pages (threads) should be homologous

The above