Question

我有一个小网页应用，根据用户输入计算距离和时间。它工作正常，但是，我的移动浏览器（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">

Answer 1

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

即可

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

无论何时你想获取那些存储的数据，你都可以得到它，如下所示

<?php $form = ActiveForm::begin([
'action'=>['summary'],
'id'=>'order-form',
]); ?>

    <?= Html::dropDownList('country', null,['malaysia'=>'Malaysia','singapore'=>'Singapore', 'brunei'=>'Brunei'],['id'=>'country']) ?>
    <?= Html::textInput('code','',['class'=>'form-control','placeholder'=>'promotion code','id'=>'code', 'style'=>'text-transform:uppercase'])?>
    <?= Html::button('Apply', ['class' => 'btn btn-primary', 'id'=>'apply']) ?>

    <?= Html::hiddenInput('id', $model->id) ?>
    <?= Html::hiddenInput('discount', '', ['id'=>'discount']) ?>
    <?= Html::hiddenInput('ship','',['id'=>'ship']) ?>
    <?= Html::hiddenInput('qty', $qty, ['id'=>'qty']) ?>
    <?= Html::hiddenInput('subtotal', $subtotal, ['id'=>'subtotal']) ?>

    <?= Html::submitButton('Checkout', ['class' => 'btn btn-primary']) ?>
<?php ActiveForm::end(); ?>

然后您可以在重新加载页面后随时随地使用它。

Answer 2

您可以使用localstorage等客户端存储技术来实现此目的。 Localstorage允许您存储特定于域的键值对数据。虽然您可以序列化对象并将它们作为特定键的字符串放置。你甚至可以使用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

页面刷新后保留数据

2 个答案: