데이터가 로컬 저장소에 저장되지 않음

-1

필드 <select name="hr">의 데이터가 저장되지 않는 이유는 무엇입니까? <select name="hr"> 및 로컬 저장소 스크립트 만있는 새 페이지를 만들면 완벽하게 작동하지만이 코드가 포함되어 필드를 저장하지 않습니다.데이터가 로컬 저장소에 저장되지 않음

<head> 
<script> 
document.getElementById("hr").onchange = function() { 
    localStorage['hr'] = document.getElementById("hr").value; 
} 
window.onload= function(){ 
    if(localStorage['hr']) 
     document.getElementById("hr").value = localStorage['hr']; 
} 
</script> 
<script> 
var musicsrc = 'alarmtone.mp3' 
function sivamtime() { 
    now=new Date(); 
    hour=now.getHours(); 
    min=now.getMinutes(); 
    sec=now.getSeconds(); 

if (min<=9) { 
    min="0"+min; 
} 
if (sec<=9) { 
    sec="0"+sec; 
} 
if (hour>12) { 
    hour=hour-12; 
    add="pm"; 
} 
else { 
    hour=hour; 
    add="am"; 
} 
if (hour==12) { 
    add="pm"; 
} 
if (hour==00) { 
    hour="12"; 
} 

    document.hours.clock.value = (hour<=9) ? "0"+hour : hour; 
    document.minutes.clock.value = min; 
    document.seconds.clock.value = sec; 
    document.ampm.clock.value= add; 
setTimeout("sivamtime()", 1000); 

} 

playit=false 
function playmusic(){ 
musicwin=window.open("","","width=100,height=100") 
musicwin.document.write('<embed src=\"'+musicsrc+'\" hidden="true" border="0" width="20" height="20" autostart="true" loop="true">') 
musicwin.document.close() 
} 

function soundcheck(cbox){ 
playit=cbox.checked 
} 

function alarm() { 

    hrs = document.arlm.hr.value; 
    min = document.arlm.mts.value; 
    apm = document.arlm.am_pm.value; 

if ((document.hours.clock.value == hrs) && 
    (document.minutes.clock.value == min) && 
    (document.ampm.clock.value == apm)) { 
    if (playit) 
    playmusic() 
    return false} 

setTimeout("alarm()", 1000);} 

</script> 
</head> 
<body onLoad="sivamtime()"> 
<table border="0" align="center" bgcolor="#c0c0c0" cellspacing="0" cellpadding="2" width="136"> 
    <tr> 
     <td colspan="4"> 
      <font size="1" face="verdana, arial, helvetica, ms sans serif"> 
       <b>Current Time</b> 
      </font> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <form name="hours"> 
       <p><input type="text" size="2" name="clock"></p> 
      </form> 
     </td> 
     <td> 
      <form name="minutes"> 
       <p><input type="text" size="2" name="clock" /></p> 
      </form> 
     </td> 
     <td> 
      <form name="seconds"> 
       <p><input type="text" size="2" name="clock" /></p> 
      </form> 
     </td> 
     <td> 
      <form name="ampm"> 
       <p><input type="text" size="2" name="clock" /></p> 
      </form> 
     </td> 
    </tr> 
</table> 

<table border="0" align="center" bgcolor="#c0c0c0" cellspacing="0" cellpadding="2" width="136"> 
    <tr> 
     <td colspan="3"> 
      <form name="arlm"> 
       <font size="1" face="verdana, arial, helvetica, ms sans serif"> 
        <b>Alarm Time</b> 
       </font> 
     </td> 

    </tr> 
    <tr align="center"> 
     <td> 
      <font size="1" face="verdana, arial, helvetica, ms sans serif"> 
       Hour 
      </font> 
     </td> 

     <td> 
      <font size="1" face="verdana, arial, helvetica, ms sans serif"> 
       Minute 
      </font> 
     </td> 

     <td> 
      <font size="1" face="verdana, arial, helvetica, ms sans serif"> 
       am/pm 
      </font> 
     </td> 
    </tr> 

    <tr align="center"> 
     <td> 
      <select id="hr" name="hr" onFocus="select()"> 
       <option value="01">01</option> 
       ... 
       <option value="12">12</option> 
      </select> 
     </td> 

     <td> 
      <select name="mts" onFocus="select()"> 
       <option value="00">00</option> 
       ... 
       <option value="59">59</option> 
      </select> 
     </td> 

     <td> 
      <select name="am_pm" onFocus="select()"> 
       <option value="am">AM</option> 
       <option value="pm">PM</option> 
      </select> 
     </td> 
    </tr> 

    <tr align="left"> 
     <td colspan="3"> 
      <input type="checkbox" name="C1" value="ON" onClick="soundcheck(this)"> 
       <font size="1" face="verdana, arial, helvetica, ms sans serif">Use music alert?</font> 
     </td> 
    </tr> 

    <tr> 
     <td align="center" colspan="3"> 
      <input type="button" size="2" value="Set Alarm" onClick="alarm()" /> 
     </td> 
    </tr> 

    <tr> 
     <td align="center" colspan="3"> 
      <input type="button" size="2" value="Reset" onClick="reset()" /> 
     </td> 
    </tr> 

</table> 
</form> 
</body>

출처

2013-03-01 Booby

document.getElementById("hr").onchange = function() { 
    localStorage['hr'] = document.getElementById("hr").value; 
}

이는 준비되지 않고 DOM에서 요소를 얻을하려고합니다. 요소의 onchange 속성에 액세스하기 전에 DOM이로드 될 때까지 기다려야합니다.

출처

2013-03-01 22:54:38

감사합니다,하지만 난 이벤트가 지연을 어떻게해야합니까? – Booby

onchange 처리기가 추가 될 때 아직 준비되지 않은 DOM 외에도 localStorage의 사용법이 잘못된 것처럼 보입니다.

대신에 :

localStorage['hr'] = document.getElementById("hr").value;

가되어야한다

localStorage.setItem('hr', document.getElementById("hr").value);

대신 :

if(localStorage['hr'])

은 다음과 같아야합니다

if(localStorage.getItem('hr'))

등등 ... 여기

당신은 그것에 대한 자세한 내용을 찾을 수 있습니다 답변 https://developer.mozilla.org/en-US/docs/DOM/Storage#Storage

출처

2013-03-01 23:02:54 Jonas

링크에서 : "참고 : 표준 JavaScript 속성 액세스 방법을 사용하여 값을 설정하고 읽을 수 있지만 getItem 및 setItem 메서드를 사용하는 것이 좋습니다." – jbabey

고마워요! 나는 그 작은 메모를 놓쳤다. :) – Jonas

데이터가 로컬 저장소에 저장되지 않음

답변

관련 문제