title: Is there any method to pass live data from one Browser tab another Browser tab by using Javascript
body: <p>I created an increment and decrement program but in that, I want to pass data from 1st Browser to 2nd Browser(one tab to another tab).</p>
  <p>In Index.html there are two buttons for incrementing and decrementing operations. On the 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?</p>
  <p><strong>index.html</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;script src=&quot;/index.js&quot;&gt;&lt;/script&gt;
      &lt;link href=&quot;/index.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Live Users in Mall&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class=&quot;container&quot;&gt;
          &lt;h1&gt;Live Users in Mall&lt;/h1&gt;
      &lt;div class = &quot;card&quot;&gt;
          &lt;button onclick = &quot;decrement()&quot;&gt;-&lt;/button&gt;
          &lt;h2 id = &quot;root&quot;&gt;0&lt;/h2&gt;
          &lt;button onclick = &quot;increment()&quot;&gt;+&lt;/button&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>index.css</strong></p>
  <pre><code>* {
      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 ;
  }
  </code></pre>
  <p><strong>index.js</strong></p>
  <pre><code>var data = 0;
          document.getElementById(&quot;root&quot;).innerText = data;
  
          function decrement() {
              data = data-1;
              if (data &lt;= 0)
              {
                  data = 0;
              }
  
              document.getElementById(&quot;root&quot;).innerText = data;
              localStorage.setItem(&quot;key&quot;, data);
          }
  
          function increment() {
              data = data + 1;
              document.getElementById(&quot;root&quot;).innerText = data;
              localStorage.setItem(&quot;key&quot;, data);
          }
  </code></pre>
  <p><em>2nd Page Name as Showdata</em></p>
  <p><strong>Showdata.html</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;link href=&quot;/index.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
      &lt;script src=&quot;/showdata.js&quot;&gt;&lt;/script&gt;
  
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Show Live Data&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    
    &lt;h3&gt;Users Present in Mall&lt;/h3&gt;
      &lt;h2 id=&quot;root&quot;&gt;0
  &lt;/h2&gt;  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>showdata.js</strong></p>
  <pre><code>var data = localStorage.getItem(&quot;key&quot;);
          document.write(data);       
         //output.innerHTML = data;
         //document.getElementById(&quot;root&quot;).innerText=data;
  </code></pre>
  <p>Can anyone please provide a solution for my problem?</p>