我有两个不同的页面，一个是管理员，另一个是用户。管理页面名称为index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: rgb(255, 255, 255);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.card{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 100px;
}
h2{
margin: 0 50px;
font-size: 50px;
}
button{
background-color: #ff9100;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 25px;
}
button:hover{
background-color: rgb(206, 206, 206);
color: #ff9100;
border-color: #000 ;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Users in Mall</title>
</head>
<body>
<div class="container">
<h1>Live Users in Mall</h1>
<div class="card">
<!--
Rather than using `inline` function calls it is
preferable to assign an external event listener.
You can easily use the same event handler to
perform both increment and decrement tasks.
To aid that the buttons were assign a dataset
attribute which is analysed in the click handler.
-->
<button data-action='decrement'>-</button>
<h2>0</h2>
<button data-action='increment'>+</button>
</div>
</div>
<script>
// Establish the communication channel - this can be (nearly) any name
// but the same name is needed for the listeners.
let oChan=new BroadcastChannel( 'tabs' );
let h2=document.querySelector('div.card h2');
// simple function to send a payload of your design
const sendmessage=function( data ){
let payload={ 'data':data };
oChan.postMessage( payload );
};
// fetch the data from localStorage or set as zero
let data=localStorage.getItem('key');
if( data == null )data=0;
else data=Number( data );
h2.innerHTML=data;
// assign an event listener for both buttons
document.querySelectorAll('button[data-action]').forEach( bttn=>{
bttn.addEventListener('click',function(e){
switch( this.dataset.action ){
case 'increment':data++;break;
case 'decrement':data--;break;
}
//update storage
localStorage.setItem('key',data);
// send the message to the "other" page
sendmessage( data );
// update local display
h2.innerHTML=data;
});
})
</script>
</body>
</html>另一个页面名称是showdata.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show Live Data</title>
</head>
<body>
<h3>Users Present in Mall</h3>
<h2>0</h2>
<script>
// establish listener on same channel
let oChan=new BroadcastChannel( 'tabs' );
oChan.addEventListener('message',(e)=>{
// process the messages as they arrive
document.querySelector('h2').innerHTML=e.data.data
});
</script>
</body>
</html>我的项目包含两个不同的用户，所以他们将在两个不同的浏览器中打开网站。但是我想显示管理员（index.html）更新的数据从第一个浏览器到用户（showdata.html）在第二个浏览器侧.这可能吗？如果是，那么请给予我解决这个问题🙏🏻🙏🏻🙏🏻
1条答案
按热度按时间fquxozlt1#
是的我找到了我通过使用后端数据库和WebSockets在同一个浏览器中的选项卡之间传输数据来解决这个问题。