javascript - 浏览器选项卡中的 LocalStorage 更新日期

Question

我有一个服务器时间，当点击+时，服务器时间会增加，点击减号时，服务器时间会减少。如果您先增加/减少时间，然后在新选项卡中打开页面，则会显示开始时间，而不是减少/放大的时间。为什么？我正确地使用了 localStorsge。我的错误是什么？

index.php

<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) {
            // $("#timer").html(response);
            // localStorage.setItem('response', response);

            if (localStorage.getItem('response') !== null) { 
                $('#timer').html(localStorage.getItem('response'));
            }       
            window.setTimeout(update, 1000);  
        }
    });
}       

update();

});

日期时间.php

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

?>

Answer 1

您缺少对存储值进行任何类型的设置 #timer，例如，在初始 update() 调用之前添加:

if (localStorage.getItem('response') !== null) { 
    $('#timer').html(localStorage.getItem('response'));
}

这会将元素的内容设置为存储的值(如果为提供的键存储了任何值 - 根据规范，localStorage.getItem(key) 返回 null 如果 key 未设置)。