未将数据存储在本地存储中

-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 2013-03-02 00:32:06

除了添加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 2013-03-01 23:11:34

谢谢！我错过了那个小纸条。 :) – Jonas 2013-03-02 18:27:47

未将数据存储在本地存储中

回答

相关问题