ロード時にローカルストレージを表示する

私は時間を計算する小さなウェブ計算機を持っています。私のモバイルブラウザは、モバイルブロスワーを最小限に抑えたり閉じたりしたときにすべてのデータを取り除きます。以前のすべてのデータをリロードしてテキストとして表示できるボタンを作成しました。ロード時にローカルストレージを表示する

「古いデータを取得する」ボタンを削除して、ページをリフレッシュする前と同じように、入力ボックスに表示されているすべての値を使用してページをリロードする必要があります。

私は入力ボックスの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; 
}

出典

2016-10-30 Hsan

あなたはどんなエラーがありますか？それがうまくいくように見えます。 –

エラーはありません。うまくいきます。私は "古いデータを取得する"ボタンを取り除き、ページの更新時に入力ボックスにデータを戻したいだけです。 – Hsan

（これらの値は、最初の存在を確認するためにチェック）対応のlocalStorageものに入力ボックスの値を設定するときに、のlocalStorageのすべての値を保存します

あなたはほとんどそこにいますが、あなたは正しく復元されておらず、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(); 
}

出典

2016-10-30 02:14:33

はうまくいった！ありがとうございました！とにかくすべてのデータをクリアするには？ – Hsan

心配しないで、分かりました。小さな構文エラーは私の明確な機能が働かなくなっていた。 – Hsan

だから、あなたはページを更新する場合、これらの値はそこになりたいですか？

あなたが計算し、ページが読み込まれる（body要素の「onloadイベントは、」）

出典

2016-10-30 02:01:35 Jayce444

ロード時にローカルストレージを表示する

答えて

関連する問題