javascript 调用cookies

cookie

   

    用来保存信息，并且与服务器互动，因此前端后端都可以使用cookie

    值得一提的是:虽然cookie是以文件的形式存储在客户端的电脑上，

　 但浏览器只会让创建cookie的网站访问自己的cookie

下面实验以表单为例子

用户:<input type="text" id="user"/><br />
密码:<input type="password" onblur="set()" id="pass"/><br />

 

cookie 属于document对象的属性，支持写入与读取。

创建cookie的语法格式:

document.cookie = "name=value"

 

当用户输入完账号密码后，通过blur事件来存储cookie的值

        function set(){
            //如果表单的值不为空，那么保存其值
            if(user.value!=""&&pass.value!=""){
                document.cookie= "username =" + user.value;
                document.cookie= "password =" + pass.value;
             }
        } 

 

查看某个网页已经存储了的cookie值:

alert(document.cookie); 　　　　　　//结果为username=hello;password=123456

alert(typeof document.cookie);        //结果为string

获取cookie名所对应的cookie值：

function get_cookies_value(cname){
    var coo = document.cookie;
    //下一行有个细节：如果不加=的话，无法避免coo值与coo名相等时的情况
    var index = coo.indexOf(cname + "=") 

    //如果名存在
    if(index!=-1){
    //获取值的开始位置
       var index_start = index + cname.length + 1;  //等号占用一位
       var index_end   = coo.indexOf(";",index_start);
       if(index_end == -1){
       //如果不存在分号，那么该值为最后一个，因此末尾索引就是coo长度
          index_end=coo.length;
       }
       //截取值并返回
       var value = coo.substring(index_start,index_end);
       return value;
    }
}

于是可以在网页加载完毕时顺便把cookie值填入表单中：

var user = document.getElementById("user");
var pass = document.getElementById("pass");

if(document.cookie!=""){
    user.value= get_cookies_value("user"); 
    pass.value= get_cookies_value("pass");
}