페이지 새로 고침 후 데이터 유지

Question

사용자 입력에 따라 거리와 시간을 계산하는 작은 웹 페이지 앱이 있습니다. 잘 작동하지만 내 모바일 브라우저 (Chrome)는 약 15 분 동안 크롬을 닫은 후 내 탭을 새로 고쳐야한다고 주장합니다. 이 경우 모든 페이지 데이터가 손실되므로 사용자가 더 이상 중요한 정보/데이터를 가지고 있지 않습니다. 이 주위에 어떤 방법이 있습니까? 여기에 당신이를 구현하기 위해 로컬 스토리지와 같은 클라이언트 측 스토리지 기술을 사용할 수 있습니다 내 코드

자바 스크립트

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 웹 스토리지에 저장할 수 있습니다 들어

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

은, 당신의 JS 코드

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

을 그리고 때마다 당신의 코드 아래에 포함 저장된 데이터를 가져오고 싶다면 가져올 수 있습니다. 다음과 같이하십시오.

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

그런 다음 페이지를 다시로드 한 후 원하는 곳 어디에서나 사용할 수 있습니다.

Answer 2

입니다. Localstorage를 사용하면 도메인 특정 키 값 쌍 데이터를 오프라인으로 저장할 수 있습니다. 개체를 serialize하고 특정 키의 문자열로 저장할 수도 있습니다. IndexDB조차도 가능합니다. sql과 비슷한 클라이언트 측 데이터베이스. 이들 중 하나를 사용하면 데이터가 손실되지 않도록 할 수 있습니다. 그 (것)들을 맑게 할 때까지 또는 당신은 그 (것)들을 맑게한다. 더

HTML 5 rocks client side storage

visit here for indexdb Html5rocks