Question

为什么不存储字段<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>

Answer 1

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

这是在没有准备好的情况下尝试从DOM获取元素。在尝试访问元素'onchange'属性之前，需要等待DOM加载。

Answer 2

除了在添加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

数据未存储在本地存储中

2 个答案: