js UserData存储

最新推荐文章于 2022-12-13 13:41:48 发布

原创最新推荐文章于 2022-12-13 13:41:48 发布 · 255 阅读

CC 4.0 BY-SA版权

本文介绍了一种利用HTML和JavaScript实现用户数据持久化的技术方案。通过定义特定的行为组件，可以实现在用户的浏览器中存储和读取数据的功能，无需每次访问都重新设置。此方法依赖于 UserData 对象来完成数据的保存和加载。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<style type="text/css">
.userData {behavior:url(#default#userdata);}
/*
url (url) : 使用绝对或相对地址指定DHTML行为组件（.htc）
url (#objID ) : 用二进制实现DHTML行为，#objID为object对象指定的id特性
url (#default#behaviorName) : IE的默认行为。由behaviorName指定
*/
</style>
<script language="javascript">
function fnGet(){
  oPersistInput.load("oDataStore");//加载用户数据持久化对象从参加UserData存储。
  oPersistInput.value = oPersistInput.getAttribute("sPersistAttr");
}
function fnSet(){
  oPersistInput.setAttribute("sPersistAttr",oPersistInput.value);
  oPersistInput.save("oDataStore");//保存用户数据的对象持久参与的UserData存储。
}
function fnRem(){
  oPersistInput.removeAttribute("sPersistAttr");
  oPersistInput.save("oDataStore");//保存用户数据的对象持久参与的UserData存储。
}
</script>
<body>
<input type="text" class="userData" id="oPersistInput"/>
<input type="button" value="Get Attribute" onclick="fnGet()"/>
<input type="button" value="Set Attribute" onclick="fnSet()"/>
<input type="button" value="Remove Attribute" onclick="fnRem()"/>
</body>
</html>