Question

我有一个计算时间的小型网络计算器。当我最小化/关闭移动浏览器几分钟或页面刷新时，我的移动浏览器会删除所有数据，因此我创建了一个按钮，可以重新加载所有以前的数据并显示为文本。

我想摆脱“获取旧数据”按钮，只需重新加载页面，并在页面刷新之前显示输入框中显示的所有值。

我一直在想输入框中的onload事件会起作用，但据我所知这是不可能的。

HTML

<body onload="getreload()">
<p>Please enter minutes</p>
<input type="text" id="etime">
<br>
<p>Please enter time in 24 hour format (eg. 15:00)</p>
<input type="text" id="stime">
<br>

<br>
<button onclick="myFunction()">Calculate</button>
<p id="finishtime">
<br>
<br>
<button onclick="getreload()">Get old data</button>
<p id="finishtime2">

<p id="mintime2">
</body>

的Javascript

function myFunction() {



function converToMinutes(s) {
    var c = s.split(':');
    return parseInt(c[0]) * 60 + parseInt(c[1]);
}

function parseTime(s) {
    var seconds = parseInt(s) % 60;
    return Math.floor(parseInt(s) / 60) + ":" + ((seconds < 10)?"0"+seconds:seconds);
}


var endTime = document.getElementById("etime").value; 
var startTime = converToMinutes(document.getElementById("stime").value);
var converted = parseTime(startTime - endTime);


document.getElementById('finishtime').innerHTML = "You will finish your break at " + converted;

if (typeof(Storage) !== "undefined") {
localStorage.setItem("convertedTime", converted);
localStorage.setItem("endTimeReload", endTime);
} else {
// Sorry! No Web Storage support
}

}


function getreload()    {
var convertedTime = localStorage.getItem("convertedTime");
document.getElementById('finishtime2').innerHTML = "End of break time: " + convertedTime;


var endTimeReload = localStorage.getItem("endTimeReload");
document.getElementById('mintime2').innerHTML = "Minutes till next client: " + endTimeReload;
}

Answer 1

因此，在计算完一个时间后，如果刷新页面，您希望这些值存在吗？

当你计算时，保存localstorage中的所有值，然后当页面加载时（body元素的'onload'）将输入框值设置为相应的localstorage值（检查以确保这些值首先存在）

Answer 2

你大多数时候都在那里，但是你没有正确恢复而没有保存startTime。这里有你需要的一切： https://jsfiddle.net/22ej8scw/

像这样恢复。（我也改变了它的保存方式）

function getreload()    {
    var startTime = localStorage.getItem("startTime");
    document.getElementById("stime").value = startTime;

    var endTimeReload = localStorage.getItem("endTimeReload");
    document.getElementById("etime").value = endTimeReload;

    if (startTime && endTimeReload)
        myFunction();
}

在加载时显示输入中的localstorage

2 个答案: