I am Created one Increment and Decrement Program but in that, I want to pass data from 1st Browser to 2nd Browser(one tab to another tab). In Index.html there are two button for increament and decreament operation. in 2nd page only there data will show but my code is working on only same tab. as well as How I can store data after page refresh??
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="/index.js"></script>
<link href="/index.css" rel="stylesheet" type="text/css">
<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">
<button onclick = "decreament()">-</button>
<h2 id = "root">0</h2>
<button onclick = "increament()">+</button>
</div>
</div>
</body>
</html>
index.css
* {
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 ;
}
index.js
var data = 0;
document.getElementById("root").innerText=data;
function decreament(){
data = data-1;
if(data<=0)
{data = 0;}
document.getElementById("root").innerText=data;
localStorage.setItem("key",data);
}
function increament(){
data = data + 1;
document.getElementById("root").innerText=data;
localStorage.setItem("key",data);
}
2nd Page Name as Showdata Showdata.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/index.css" rel="stylesheet" type="text/css">
<script src="/showdata.js"></script>
<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 id="root">0
</h2>
</body>
</html>
showdata.js
var data = localStorage.getItem("key");
document.write(data);
//output.innerHTML = data;
//document.getElementById("root").innerText=data;
Can Anyone Please Give me Solution Of My Problem???
Aucun commentaire:
Enregistrer un commentaire