妙味5：document.cookie 操作

本地环境中测试需要用fireFox,其它几个浏览器不行，服务器都可以测出正确结果

 

cookie特点：

1. 如登陆信息存储，同一论坛打开多个页面不用重复登陆，就是通过cookie来存取实现；

2. 正常情况下，关闭浏览器，相应cookie信息会清除；

3. 若设置了cookie的过期时间，关闭浏览器不会清除数据，只有到期清除，也可以手动清除；

 

应用：

如邮箱登陆后，记住用户名

拖拽后记住位置

 

 

cookie封装函数(可以直接使用)：

// 开始----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

//存入cookie

function setCookie(name, value, iDay){
     //name:cookie名字; value:cookie值; iDay:缓存天数
     var oDate=new Date();
     oDate.setDate(oDate.getDate()+iDay);
     document.cookie=name+'='+value+';expires='+oDate;
}
//取出
function getCookie(name){
     //'username=abc; password=123456; aaa=123; bbb=4r4er'
     var arr=document.cookie.split('; '); //以分号加空格进行分割，结果：arr->['username=abc', 'password=123456', ...]
     for(i=0;i<arr.length;i++){
          var arr2=arr[i].split('=');          //再次分割出名字进行比较，找到就返回相应的值，未找到就返回空
          if(arr2[0]==name){
               return arr2[1];
          }
     }
     return '';
}
//删除
function removeCookie(name){
     setCookie(name,'1',-1);          //设置对应的为昨天过期即可
}

// 结束----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

// 使用测试-----------------------------------------------------------------
setCookie('username','sdd','10');     //设置
setCookie('password','sdd2');
alert(document.cookie);               //查看
alert(getCookie('username'));     //查看指定的
removeCookie('username');
alert(getCookie('username'));     //删除指定的

 

 

 

 

 

 

// 记住用户名功能(需要加载上面三个cookie函数) =============================================================

window.onload=function(){
     var oForm=document.getElementById('form1');
     var oUser=document.getElementsByTagName('user')[0];     //input的name可以作为TagName来选择
     var oBtnclear=document.getElementsByTagName('a')[0];

oForm.onsubmit=function(){
          setCookie('user',oUser.value,30);
     };
     oUser.value=getCookie('user');
     oBtnClear.onclick=function(){
          removeCookie('user');
          oUser.value='';
     };
}

 

<form id="form1" action="http://www.miaov.com/">
     用户名：<input type="text" name="user" />
     密码：<input type="password" name="pass" />
     <input type="submit" value="登录" />
     <a href="javascript:;">清除记录</a>
</form>