I'm trying to make this thing where in one tab you type something, and in another it pops up. However, I have to constantly reload the page to get my next message. First, this is what I tried.
<!DOCTYPE html>
<html>
<body>
<p id="message"></p>
<script>
var x = localStorage.getItem('message')
var i;
for (i = 0; i < 5) {
document.getElementById('message').innerHTML = x;
}
</script>
</body>
</html>
HOWEVER, this puts the page in a constant reloading state. How would I do this? Thanks!
I'm trying to make this thing where in one tab you type something, and in another it pops up. However, I have to constantly reload the page to get my next message. First, this is what I tried.
<!DOCTYPE html>
<html>
<body>
<p id="message"></p>
<script>
var x = localStorage.getItem('message')
var i;
for (i = 0; i < 5) {
document.getElementById('message').innerHTML = x;
}
</script>
</body>
</html>
HOWEVER, this puts the page in a constant reloading state. How would I do this? Thanks!
Share Improve this question asked Jul 2, 2020 at 19:17 WestlenandoWestlenando 882 silver badges9 bronze badges 6- Sure. This would help you. – pecey Commented Jul 2, 2020 at 19:19
-
1
You can use
setIntervalto check for a change in localStorage periodically. – Barmar Commented Jul 2, 2020 at 19:20 - You can also receive messages from the server using Web Sockets or server-side events. – D. Pardal Commented Jul 2, 2020 at 19:20
-
1
@blex Put that in an answer, it's better than my
setIntervalanswer. – Barmar Commented Jul 2, 2020 at 19:22 -
Yor
forloop will never be done = infinite loop:for (i = 0; i < 5) { document.getElementById('message').innerHTML = x; }– iAmOren Commented Jul 2, 2020 at 19:28
3 Answers
Reset to default 4Use setInterval instead of a loop.
setInterval(function() {
var x = localStorage.getItem('message');
document.getElementById('message').innerHTML = x;
}, 1000);
This will update every second.
Instead of constantly polling for updates, you can set up an event listenener to catch every message that is sent. You can do this thanks to the storage event:
// Every time a change it made to this domain's localStorage (item added, changed, removed)
window.addEventListener('storage', function() {
// Update your DOM
document.getElementById('message').innerHTML = localStorage.getItem('message');
});
You have an infinite loop. A for loop has four steps.
- Initialization: Declaring the variable and its initial value(Happens once)
- Condition: Checking the condition to continue the loop
- Final
- Expression: Usually where you handle your logic that will end your loop like incrementing the i variable
- Execution: Execute the code in the code block
Your method is working but it never stops working, hence why your browser doesn't stop loading.
The for loop moves too quickly anyway and it would be better to put to listen for a storage event update on your document.
var messageContainer = document.querySelector('#message')
window.addEventListener('storage', function() {
var text = localStorage.getItem('message')
messageContainer.textContent = text
}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744183817a4562109.html
评论列表（0条）