【JavaScript从入门到精通】第二十八课 cookie基础与应用

此内容来自开课吧石川微信公众号

什么是cookie

cookie的作用是用来保存页面的信息,例如记住用户名,最近查看的商品等。我们在js里使用的变量的时候,页面只要重新刷新变量的值就会重新初始化,但cookie并不会。

关于cookie,它有几个特性:

  • 同一网站的所有页面共享一个cookie
  • cookie的数量(一个网站普遍不会超过50条)和大小(4-10K)是有限的
  • 有过期时间(例如两周内,免登陆)

由于本地页面只有火狐能完整地将cookie保留下来,因此这节课的内容我们都建议使用火狐浏览器进行测试。

在JS里使用cookie,我们使用document下的cookie属性即可。

alert(document.cookie);

现在我们来对cookie进行基本操作——赋值。在cookie里,数据是以类似于JSON的名字=值的形式存在的。

document.cookie='user=blue';
document.cookie='pass=123456';
alert(document.cookie);

值得注意的是,JS里对cookie进行多次赋值并不会覆盖掉前面的值而是叠加:

值得注意的是,这里的cookie是没有期限的,我们关闭浏览器后cookie就失效了。

因此,我们可以给cookie设置过期时间。在这里我们需要补充一个知识:Date对象,date对象除了获取当前时间外,还可以对date对象本身的时间进行设置。

var oDate=new Date();
oDate.setDate(32);
alert(oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate());

将oDate对象内的date设置为32,由于超出了一个月应有的天数,打印出来的日期会变成下个月。

var oDate=new Date();
oDate.setDate(oDate.getDate()+800000);
alert(oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate());

如果我们在设置setDate时,直接用当前时间进行加减,就可以将其设置为相对于当前时间偏移的时间了。

利用这个方法,我们就可以对cookie添加过期时间了。例如,我们现在希望cookie2周以后过期:

var oDate=new Date();
oDate.setDate(oDate.getDate()+14);
document.cookie='user=blue;expires='+oDate;
alert(document.cookie);

cookie内用expires设置其有效期限。当然expires不会显示到cookie中。这时我们再进行测试,关闭浏览器再打开,打印的cookie并不会消失。

在火狐浏览器中,右键页面-查看页面信息-详细信息-查看cookie,可以看到一个管理cookie的小工具,其中空地址的就是我们的本地cookie,其中可以看到cookie的具体内容和过期时间。

同样的,为了简便起见,我们可以封装一个cookie函数以便今后的使用:

function setCookie(name, value, iDay)
{
    var oDate=new Date();
    oDate.setDate(oDate.getDate()+iDay);
    document.cookie=name+'='+value+';expires='+oDate;
 }

我们打印cookie可以发现,cookie内部的多条数据是以”; “(分号+空格)的形式隔开的。我们如果想获取cookie里面的数据,则需要想办法将这些值分割开来——没错,可以采用前面学过的split方法。

function getCookie(name)
{
    var arr=document.cookie.split('; ');
    for(var i=0;i<arr.length;i++)
    {
        var arr2=arr[i].split('=');
        if(arr2[0]==name)
        {
            return arr2[1];
        }
    }
    return '';
}

现在我们就完成了cookie基本的设置和获取功能,但我们知道cookie的大小和容量都是有限的,因此很多时候我们有必要删除cookie。实际上,删除cookie的方法非常简单:

function removeCookie(name)
{
    setCookie(name, 1, -1);
}

我们将cookie设置为-1天后过期,这样cookie就会自动失效了。

最后,我们来使用cookie做一个小例子:使用cookie记录上次登录的用户名。

<html>
    <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
        <script>
        function setCookie(name, value, iDay)
        {
            var oDate=new Date();
            oDate.setDate(oDate.getDate()+iDay);
            document.cookie=name+'='+value+';expires='+oDate;
        }
        function getCookie(name)
        {
            var arr=document.cookie.split('; ');
            for(var 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);
        } 
        window.onload=function ()
        {
            var oForm=document.getElementById('form1');
            var oUser=document.getElementsByName('user')[0];
            oForm.onsubmit=function ()
            {
                setCookie('user', oUser.value, 14);
            };
            oUser.value=getCookie('user');
        };
        </script>
    </head>
    <body>
        <form id="form1" action="http://www.zhinengshe.com/">
            用户名:<input type="text" name="user" /><br>
            密码:<input type="password" name="pass" /><br>
            <input type="submit" value="登陆" />
        </form>
    </body>
</html>

当我们提取表单登录的时候(onsubmit),我们将用户名存入cookie。同时在页面重新加载(onload)的时候,我们将cookie读取出来,这样就实现了记住用户名的功能。

如需转载,烦请注明出处:https://www.qdskill.com/javascript/4440.html

发表评论

登录后才能评论