[置顶] 3.2 Javascript:探索客户端-cookie

网页内容

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Cookie</title>
<!--添加外部js文件-->
<script type="text/javascript" src="Cookie.js">//通过src向html页面导入js文件</script>
</head>
<body">
<div onClick="setCookie()">
添加cookie
</div>
<div onClick="readCookike()">
读取cookie
</div>
<DIV></DIV>
<div onClick="clearCookie()">
清除cookie
</div>
</body>
</html>

js代码

// JavaScript Document

//javascriipt + cookie =适合客户端、便利的持久性数据储存方案
//cookie存储在客户端的内在上
//多个cookie存储数据内容之间以分号分隔
//cookie可以为其设置过期时间,如果没有设置,当浏览器关掉时,也就是它的末日
//
//cookie是存在客户端本地的,所以相对来说存在安全隐患
//但是,cookie中只要不存储第三问题,也就无所谓了
//cookie里可存4kb大小的数据,超过会报错
//跨浏览器cookie无法交互
//
function setCookie() {
    //navigator对象可提供浏览器本身信息
    //这里用来检查浏览器的cookie功能是否开启
    if(!navigator.cookieEnabled)
    {
        alert("cookieEnabled is false");
        return;
        }

    //三个参数 cookie名 cookie值 过期时间
    var cookieID="uName";
    var cookieValue="shiqiqi";
    var date=5*365;

    //调用writeCookie方法
    writeCookie(cookieID,cookieValue,date);
    alert("write the cookie");
    }

function writeCookie(name,value,days) {
    var date=new Date();//一个时间对象
    date.setTime(date.getTime()+(days*24*60*60*1000));//setTime()方法以毫秒设置 Date 对象。getTime()方法可返回距 1970 年 1 月 1 日之间的毫秒数。
    var expires="; expires=" +date.toGMTString();//expires失效时间属性
    document.cookie=name+"="+value+expires+";path=/";//设置cookie的名 值 过期时间 存储地址
    }

function readCookike() {
    var name="uName";//cookie的名
    var seachName=name+"=";
    var cookies=document.cookie.split(";");//获取本地的所有的Cookies
    if(!cookies)//if语句判断字符是否为空,如果为空为false,否则为true
    {
        alert("no cookies");
        return;
        }
    for(var i=0;i<cookies.length;i++)//循环所有的Cookies
    {
        var c=cookies[i];//拿出每一个Cookies
        while(c.charAt(0)==" ")//charAt(index)方法可返回指定位置的字符
        {
            //这里用来去除开头空格
            c=c.substring(1,c.length);//substring(start,stop)方法用于提取字符串中介于两个指定下标之间的字符。
            }

        if(c.indexOf(seachName)==0)//indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置
        {
            //查看该cookie中是否存在名为seachName值的文本
            //取出cookie的值
            c=c.substring(seachName.length,c.length);
            alert(c);
            }
            else{
                alert(null);
                }
        }
    }

function clearCookie() {
    var name="uName";
    writeCookie(name,"",-1);
    //清空一个cookie,把它的值变为"",再将过期时间设置为-1

    alert("clear the cookie");
    }

你可能感兴趣的:(JavaScript,html,cookie)