Change element attribute of another page

Question

Hello guys I have some problem with my website. Here's the situation:

Page 1

<script type="text/javascript" src="jscript.js">
<input type="button" value="change" onClick="changeAttr()">

Page 2

<script type="text/javascript" src="jscript.js">
<input type="text" value="Hello" id="dynamictext">

jscript.js

function changeAttr(){
document.getElemenyById('dynamictext').value="World";
}

Now these 2 pages are open on different tabs. What I want to happen is whenever the button on page 1 is clicked, the value of input text on page 2 will change to "World". How can I make this possible with Javascript or Jquery?

Answer 1

The 1st tab has the task to change a value in localStorage. localStorage.setItem('superValue', 'world');

Meanwhile the 2nd tab would be "listen" to changes on that localStorage value:

var dinamictext = document.querySelector('dinamictext');

setInterval(function () {
    if (dinamictext.value !== localStorage['superValue']) {
        dinamictext.value = localStorage['superValue'];
    }
}, 100);

This of course works only with pages on the same domain.