Duplicate browser tab ignores current values

Issue

When you duplicate a tab in your browser, the current values are ignored. Tested in the latest versions of Chrome, Firefox and Edge on a Windows 11 computer.

https://codepen.io/mori79/pen/yLRJgXx

DEMO

Steps to reproduce the issue

  1. Open the demo page or create your own.
  2. Change the textarea and input default values.
  3. Duplicate the tab.

enter image description here

  1. The span and output don’t show the expected text content.

Question

  1. Why does it happen?
  2. What’s the solution?

I would guess it’s because the JS isn’t being run.

DEMO link worked in Firefox not in others.

My Firefox just got an update and as you said now it seems to be all right. However, the problem persists with a checkbox (and probably other form controls). Please see the demo page again.

I suggest you store the current values in sessionStorage. Try this . . . .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<textarea>Hello World</textarea>
<p></p>
<script>
let textarea = document.querySelector('textarea');
let p = document.querySelector('p');

textarea.addEventListener("input", store);

function store(){
sessionStorage.setItem("ta", textarea.value);
}

p.textContent = sessionStorage.getItem("ta");
</script>
</body>
</html>
1 Like

Mmmpasswordnomnomnom.

(Storing most values in sessionStorage is fine. Dont store sensitive information.)

And yes, I know that sessionStorage is local to the origin. Still dont store passwords (especially in plaintext form…) anywhere on the system if you can at all help it…

This works OK

<script>
  (function( d ) {
    
    var textarea = d.querySelector('textarea'),
               p = d.querySelector('p'),
           range = d.querySelector('input[type="range"]'),
          output = d.querySelector('output'),
        checkbox = d.querySelector('input[type="checkbox"]'),
            span = d.querySelector('span');

    function write() {
      setTimeout( function(){
         p.textContent = textarea.value;
         output.textContent = range.value;
         span.textContent = checkbox.checked;
       }, 100 );
   }
   
      textarea.addEventListener('input', write);
      range.addEventListener('input', write);
      checkbox.addEventListener('change', write);

      write();

  }( document ));
  </script>
1 Like

I’m not sure, but can we use an async/await function instead of setTimeout?

I am sure that we can not use an async/await function instead of setTimeout.

1 Like

Note setTimeout does not require a delay to work

      setTimeout( function(){
         p.textContent = textarea.value;
         output.textContent = range.value;
         span.textContent = checkbox.checked;
       } );

The default state of the checkbox is false, setTimeout is required
to allow it to change to true.

1 Like

Can I achieve the same result with localStorage?

if you use localStorage the data will be kept by the browser indefinitely (unless the browser’s privacy settings result in the data being cleared at the end of a session or if the user clears site data). So even if you turn your computer off the data will be available when you switch it back on again and download the same web page, not just when you duplicate a browser tab.

1 Like

The delay 100 ms is just an arbitrary number and the actual time differs from browser to browser. Can the time a browser needs to load the current value into the duplicate tab calculated?

If when duplicating the tab the browser is also running the js code then the js code would overwrite the edited and duplicated values.
Try putting an alert statement in the js code. If the alert comes up a second time then that is the answer to why it is happening.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.