客户端数据存储机制cookie
在实际的Web应用中经常需要在客户端存储一些客户信息一方面是为了改善用户体验(如存储访问密码历史表单信息)另一方面有效地减轻了服务器数据读取压力访问者在第一次访问页面时设置cookie变量是存储在客户端计算机中当下次浏览器请求某个页面时就可以读取cookie中存储的值从而实现客户端数据存取
下面将通过一个例子展示一个客户端数据存储的实际应用执行流程如下
()创建一个存储访问者名字的cookie;
()当访问者首次访问网站时访问者会被要求填写姓名信息该姓名信息会存储于cookie中
()当访问者再次访问网站时浏览器会显示欢迎词信息
在JavaScript创建cookie
创建一个可在cookie变量中存储访问者姓名的函数代码如下
function setCookie(c_namevalueexpiredays)
{
var exdate=new Date() //实例化日期变量
exdatesetDate(exdategetDate()+expiredays) //设置日期变量
documentcookie=c_name+ = +escape(value)+
((expiredays==null) ? : ;expires=+exdatetoGMTString())
}
【代码解读】
setCookie()函数的功能是设置cookie的名称值及失效时间首先将获取当前的日期转换为有效的日期然后设置cookie名称值及失效时间并将该值存入documentcookie对象
从JavaScript取回cookie的值
从JavaScript取回cookie的值创建读取客户端cookie值的函数同时判断当前cookie的状态代码如下
function getCookie(c_name)
{
if (documentcookielength>) //判断当前cookie是否为空
{
c_start=documentcookieindexOf(c_name + =)
if (c_start!=)
{
c_startc_start=c_start + c_namelength+
c_end=documentcookieindexOf(;c_start)
if (c_end==) c_end=documentcookielength
return unescape(documentcookiesubstring(c_startc_end))
//返回客户端cookie的值
}
}
return
}
【代码解读】
getCookie()函数首先会判断documentcookie对象中是否存有cookie如果documentcookie对象存有某些cookie值那么会继续检查指定的cookie是否已储存如果满足判断条件就返回cookie存储值否则返回空字符串
JavaScript流程控制
当完成了cookie的创建和读取之后需要创建一个流程控制函数这个函数的作用是如果cookie已设置则显示欢迎词否则显示提示框要求用户输入名字
function checkCookie() {
username=getCookie(username) //获得cookie中的用户名变量
if (username != null && username != ) {
alert(Welcome again +username+!) //弹出欢迎信息
} else {
username=prompt(Please enter your name:)
if (username != null && username != ) {
setCookie(usernameusername) //设置cookie
}
}
}
客户端数据存储示例的完整代码如下
[] []