在加载时在输入中显示本地存储

Question

我有一个计算时间的小型网络计算器。当我 minimised/closed 移动浏览器运行几分钟或刷新页面时，我的移动浏览器会清除所有数据，因此我制作了一个按钮，可以重新加载所有以前的数据并显示为文本。

我想去掉 "Get old data" 按钮，只重新加载页面，让输入框中显示的所有值与页面刷新前一样。

我一直认为输入框中的 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

你大部分都在那里，但你没有正确恢复并且没有保存开始时间。这里有一个 fiddle，里面有你需要的一切： 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();
}

在加载时在输入中显示本地存储

Display localstorage in input on load

javascript

cookies

input

reload