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();

}）;

datetime.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。

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

1 个答案: