Last active
May 6, 2022 18:48
-
-
Save m3g4p0p/fe6e98aa5865718a90983f8f961214f6 to your computer and use it in GitHub Desktop.
local storage communication
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Index</title> | |
| </head> | |
| <body> | |
| <input id="message"> | |
| <script> | |
| const message = document.getElementById('message') | |
| message.addEventListener('input', () => { | |
| localStorage.setItem('#test', message.value) | |
| }) | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Test</title> | |
| </head> | |
| <body> | |
| <div id="test"></div> | |
| <script> | |
| window.addEventListener('storage', event => { | |
| const target = document.querySelector(event.key) | |
| if (target) { | |
| target.textContent = event.newValue | |
| } | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi @febreno, thx! :)
Well using
won't work here since the
#textelement is not on the same document -- this was the very idea of using storage events for communication, so you'd set thetextinputvalue to the local storage instead:... and the target page would have to listen to storage events as shown in the gist then.
Note that this will only work if both pages are on the same domain though.
Cheers!