浏览器localstorage方式实现多页签通讯

it2026-08-31  2

index01.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>页面一</title> </head> <body> <input id="name" autocomplete="off" > <input type="button" id="btn" value="提交" > <script type="text/javascript"> window.onload = function () { var btnEle = document.getElementById('btn'); var nameEle = document.getElementById('name'); btnEle.onclick = function () { var name = nameEle.value; // localStorage.setItem("键", 值); localStorage.setItem("name", name); } } </script> </body> </html>

index02.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>第二个页面</title> </head> <body> <script type="text/javascript"> window.onload = function () { window.addEventListener("storage", function (event) { console.log(event.key + "=" + event.newValue); }); } </script> </body> </html>

 

最新回复(0)