页面刷新后保留数据

Question

我有一个小型网页应用程序，可以根据用户输入计算距离和时间。它工作正常，但是，我的移动浏览器 (Chrome) 在关闭 chrome 大约 15 分钟后坚持刷新我的标签页。发生这种情况时，所有页面数据都会丢失，因此用户不再拥有重要的 info/data。有没有办法解决？这是我的代码

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;

}

HTML

<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">

Answer 1

您可以使用 localstorage 等客户端存储技术来实现这一点。 Localstorage 允许您存储域特定的键值对数据 offlie.Although 您可以序列化对象并将它们作为特定键的字符串放置。你甚至可以使用 IndexDB。类似于 sql 的客户端数据库。使用其中任何一个，您都可以确保没有数据丢失。直到他们清除它们或您清除它们。

window.localStorage.setItem(key,value) -> will set a key value pair
window.localStorage.getItem(key,value) -> will get a key value pair

更多

HTML 5 rocks client side storage

visit here for indexdb Html5rocks

Answer 2

您可以将其存储在HTML5 Web 存储中，只需在您的 JS 代码中包含以下代码

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

无论何时你想获取那些存储的数据，你都可以像下面这样获取

var convertedTime=localStorage.getItem("convertedTime");

然后您可以在重新加载页面后在任何地方使用它。

页面刷新后保留数据

Keep data after page refresh

javascript

mobile

google-chrome

refresh