使用userData保存select標(biāo)記

2012/11/11 15:54:22作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

【實(shí)例描述】

如果用戶選擇下拉框內(nèi)容后關(guān)閉了瀏覽器，為了能在重新打開頁(yè)面時(shí)正確顯示用戶的選擇．通常先使用Cookie保存用戶的選擇。本例學(xué)習(xí)如何用userData替換Cookie實(shí)現(xiàn)這種客戶端保存功能。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁(yè)-學(xué)無(wú)憂（yzddtk.cn）</title>
<style>
      .userData {behavior:url(#default#userdata);}
</style>
</head>
<body>
隨便選擇一項(xiàng)，重新啟動(dòng)頁(yè)面，看是否保存住了選擇項(xiàng)<br />
<select id="select1"  class="userData">
<option>選項(xiàng)一</option>
<option>選項(xiàng)二</option>
<option>選項(xiàng)三</option>
<option>選項(xiàng)四</option>
</select>
<script>
    var obj=document.all.select1;                      
 //獲取頁(yè)面中的復(fù)選框
    obj.attachEvent('onchange',saveSelectedIndex)       
//為復(fù)選框綁定更改事件
    function saveSelectedIndex(){                       
//保存數(shù)據(jù)到UserData中的方法
    obj.setAttribute("sSelectValue",obj.selectedIndex);
    obj.save("oSltIndex");
    }
    window.attachEvent('onload',loadSelectedIndex)      
//加載數(shù)據(jù)的事件
    function loadSelectedIndex(){                       
//從UserData中獲取數(shù)據(jù)的方法
    obj.load("oSltIndex");
    obj.selectedIndex=obj.getAttribute("sSelectValue");
}
</script>
</body>
</html>

【運(yùn)行效果】

使用userData保存select標(biāo)記運(yùn)行效果