刷新页面后保留数据

Keep data after page refresh

本文关键字：保留 数据 刷新      更新时间：2023-09-26

我有一个基于用户输入计算距离和时间的小网页应用程序。它工作得很好，但是，我的手机浏览器(Chrome)坚持在关闭Chrome大约15分钟后刷新我的标签。当发生这种情况时，所有页面数据都会丢失，因此用户不再拥有重要的信息/数据。还有别的办法吗?这是我的代码

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

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

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

当你想要获取这些存储的数据时，你可以像下面这样获取它

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

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

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

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

查看更多

HTML 5颠覆客户端存储

访问这里indexdb Html5rocks

相关文章：