数据存储脚本化,我们用到比较多的是cookie和userData。
首先介绍下cookie。
cookie是浏览器提供给客户端存储少量数据的一种持久化对象之一。
cookie的生命周期可以长于浏览器Window对象。
我们可以通过Document的cookie属性来操作cookie对象,但这个对象是一个“单例
”,即它在浏览器实例中是唯一的。
cookie包括的属性
1、exspire 这个属性指定cookie的生存期。expire = date; 这里的date的格式只能是GMT或UCT格式。
可以这样写:var expireTime = new Date(); expire = expireTime.toGMTString();
2、path属性指定与cookie关联在一起的网页。默认为创建cookie的网页,若要使某个服务器域都能使用这个cookie,可以指定path = "/";
例外指定domain可以指定cookie在当前服务器下某个子域使用。
3、secure属性指定网络传输cookie的方式,为bool值。当为false时,表示以不安全的HTTP协议连接传输,为ture时以HTTPS或其他安全协议进行传输。
操作cookie
document的cookie属性以一定的字符串格式进行设置。例 name=value;expire=date;path=path;domain=domain;secure=Boolean;
要改变cookie的值只要使用同一个名字和新的值即可,删除cookie只要设置过期日期即可。操作实例
该实例通过cookie获取输入前次输入的姓名,显示不同的欢迎语句。
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
5<title>无标题文档</title>
6</head>
7
8<body>
9<h1>
10<script type="text/javascript">
11 function getCookie(name)
12 {
13 var cookies = document.cookie.split(";");
14
15 for(var i = 0 ;i<cookies.length;i++)
16 {
17 var s = cookies[i].split("=");
18 if(s[0].replace(/\s+/g,"") == name) return s[1];
19 }
20 }
21
22 function setCookie(name,value,expireTime)
23 {
24 var expireTime = expireTime ? "expire = " + expireTime.toGMTString() : "";
25 document.cookie = name + "=" + value +";" + expireTime;
26 }
27
28 var lastPersonName = getCookie("$name$") || "";
29
30 var name = prompt("请输入您的姓名:",lastPersonName);
31
32 var times = getCookie(name) || 0;
33
34 setCookie(name,times - 0 + 1);
35
36 setCookie("$name$",name);
37
38 if(times>0)
39 {
40 document.write("Hello "+name+",Nice to meet you again.");
41 } else {
42
43 document.write("Hello "+name+".");
44
45 }
46
47
48 </script>
49
50</h1>
51
52
53</body>
54</html>
接下来介绍userData。
userData通过将数据写入UserData存储区进行存储。该数据将一直存在,除非人为删除。
userData的声明
*************************************知识点来自月影《王者归来》***********************************
第一种方法:<style>.userData{behavior:url('#defaule#userData')} </style>
第二种方法:object.style.behavior = "url('#defaule#userData')"
userData的属性和方法
expires指定失效日期,同cookie一样。
setAttribute()设置属性值。形式:setAttribute("AttributeName",value);
save()将对象数据保存到UserData存储区中。形式:save("userDataName");
load()从UserData中载入存储的数据。形式:load("userDataName");
getAttribute()获取指定的属性值。形式:getAttribute("AttributeName");
操作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> <style>.userData{behavior:url(#default#userData);}</style> <script type="text/javascript"> <!-- function fnSave() { var content = document.getElementById('content'); var expireTime = new Date() expireTime.setFullYear(expireTime.getFullYear() + 1); content.expire = expireTime.toGMTString(); content.setAttribute("inputContent",content.value); content.save("cUserData"); } function fnLoadInput() { var content = document.getElementById('content'); content.load("cUserData"); content.value = content.getAttribute("inputContent"); } --> </script> </head> <body> <input class="userData" type="text" id="content" /> <button value="save" onclick="fnSave()">Save</button> <button value="load" onclick="fnLoadInput()" >Load</button> </body> </html>