选项卡中的 LocalStorage 更改日期答案

【问题标题】：LocalStorage change date in tabs选项卡中的 LocalStorage 更改日期
【发布时间】：2018-06-30 12:10:44
【问题描述】：

我有一个服务器时间，点击 + 会增加，点击减号会减少。我打开第一个选项卡，然后打开第二个选项卡。在第二个选项卡中，我更改时间（+ 或 -）。在第一个选项卡中，小时随机闪烁。我的错误是什么？

index.php

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<div id="timer"></div>
<button id="plus">+</button>
<button id="minus">-</button>

<script>
jQuery(document).ready(function ($) {
    var counter = 0;

    $('#plus').on('click', function (event) {
        counter++;
                localStorage.setItem('counter', counter);
        update();
    });

    $('#minus').on('click', function (event) {
        counter--;
                localStorage.setItem('counter', counter);
        update();
    });

    function update() {
        $.ajax({
            url: 'datetime.php',
            timeout: 1000,
            type: 'POST',
            data: 'counter=' + counter,
            success: function (response) {
                if (localStorage.getItem('response') !== null) { 
                    $('#timer').html(localStorage.getItem('response'));
                    localStorage.setItem('response', response);
                }       
                window.setTimeout(update, 1000);  
            }
        });
    }       
    update();
});
</script>

日期时间.php

<?php 
$counter = $_POST['counter'] ?? 0;
echo date('d/m/Y h:i:s', time() + (int)$counter * 3600);

?>

【问题讨论】：

您是否需要将计数器发布到服务器，因为您已经可以这样做而无需发布。

标签： javascript php jquery ajax local-storage

【解决方案1】：

不会调用第一个选项卡上的函数update，除非单击#plus 或#minus，并且由于它没有被调用$('#timer').html() 不起作用，它已经被放置在成功回调axaj请求。

你应该添加

$(function() {
  window.setTimeout(function() {
    update();
  },1000);
});

到页面更新#timer，除非没有点击任何内容。

【讨论】：

谢谢您的回答。 jsfiddle.net/qfxu40ox我这样做了，但它也有效（我这里怎么了？
它不能按我想要的方式工作。在此版本中，jsfiddle.net/qfxu40ox 在第一个和第二个选项卡中的小时数随机闪烁
我不知道你是如何让它们在 jsfiddle 上闪烁的，因为在我的浏览器上我看到的只是 404 抱怨 datetime.php
请检查更新jsfiddle。它仍然在我的浏览器上给出 404，但至少它是一致的。

【解决方案2】：

在第一个选项卡中，小时随机闪烁。我的错误是什么？

update() 函数计划在window.setTimeout(update, 1000) 重复调用。

【讨论】：