软件学堂

网游分类软件分类

使用userData保存select标记

2012-11-11 来源:网络

【实例名称】

使用userData保存select标记

【实例描述】

如果用户选择下拉框内容后关闭了浏览器,为了能在重新打开页面时正确显示用户的选择.通常先使用Cookie保存用户的选择。本例学习如何用userData替换Cookie实现这种客户端保存功能。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</title> <style>       .userData {behavior:url(#default#userdata);} </style> </head> <body> 随便选择一项,重新启动页面,看是否保存住了选择项<br /> <select id="select1"  class="userData"> <option>选项一</option> <option>选项二</option> <option>选项三</option> <option>选项四</option> </select> <script>     var obj=document.all.select1;                       //获取页面中的复选框     obj.attachEvent('onchange',saveSelectedIndex)       //为复选框绑定更改事件     function saveSelectedIndex(){                       //保存数据到UserData中的方法     obj.setAttribute("sSelectValue",obj.selectedIndex);     obj.save("oSltIndex");     }     window.attachEvent('onload',loadSelectedIndex)      //加载数据的事件     function loadSelectedIndex(){                       //从UserData中获取数据的方法     obj.load("oSltIndex");     obj.selectedIndex=obj.getAttribute("sSelectValue"); } </script> </body> </html>

【运行效果】

 使用userData保存select标记运行效果

【难点剖析】

userData通常被称为是一种保存数据的行为。使用前必须在  style  元素内添加一行代码  “userData{behavior:url(群default#userdata);}”。然后指定要使用userData功能的元素的“class”属性。

【源码下载】

为了JS代码的准确性,请点击:使用userData保存select标记 进行本实例源码下载 

上一篇:使用userData保存文本内容
下一篇:使用userData保存checkbox标记

相关文章