JS学习笔记20-cookie

一、什么是cookie?

Cookie 是一些数据, 存储于你电脑上的文本文件中。
在生活当中,当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。
Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:

  • 当用户访问 web 页面时,他的名字可以记录在 cookie 中。
  • 在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。

Cookie 以名/值对形式存储,如下所示:
username=John Doe
当浏览器从服务器上请求 web 页面时, 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

cookie须知:

  1. 一个网站(同一个域名)共享同一套cookie
  2. 存储容量不是很大,一般就是 几十k不等
  3. 有过期时间

二、设置cookie

<script>
    document.cookie='username=blue';
    alert(document.cookie);
</script>

结果:
在这里插入图片描述

多个值不会覆盖:

<script>
    document.cookie='username=blue';
    document.cookie='pass=123456';
    alert(document.cookie);
</script>

在这里插入图片描述

3.1 无过期时间

如果不设置过期时间,那么当我们关闭浏览器,cookie就会清除。

我们把设置cookie的语句注释掉,然后关闭浏览器再打开看看。

<script>
    // document.cookie='username=blue';
    // document.cookie='pass=123456';
    alert(document.cookie);
</script>

效果:
在这里插入图片描述
可以发现我们的cookie没有了。

在设置过期时间之前我们需要先了解一个知识点:

3.2 设置日期对象内部的时间

如何设置日期为n天后?
示例:

<script>
    var date = new Date();

    //本文测试日期是:2020-5-23
    
    //设置日期对象内部的时间
    
    // date.setDate(1);//弹出会是当前月份的第一天 2020-5-1
    // date.setDate(32);//2020-6-1
    //date.setDate(date.getDate())//没有变化
    date.setDate(date.getDate()+10)//2020-6-2

    alert(date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate());
</script>

3.3 expires 设置过期时间

语法:document.cookie='user=blue;expires='+date;
date即为过期时间;

示例:

<script>
    var date=new Date();

    //求14天以后的日期
    date.setDate(date.getDate()+14);

    document.cookie='user=blue;expires='+date;

    alert(document.cookie);
</script>

接下来我们注释掉设置语句并且关闭浏览器重新打开看看还有没有。

3.4 封装成函数

<script>
    //名字,值,过期时间
    function setCookie(name,value,iDay){

        var date=new Date();

        date.setDate(date.getDate()+iDay);
        document.cookie=name+'='+value+';expires='+date;
    }

    setCookie('username','Are',365)
    setCookie('password','123456',10)
</script>

三、获取、查看cookie

最简单的办法:alert(document.cookie);
cookie里边存储的值是:username=test的字符串形式
cookie里边的值详细格式是:a=12: b=5; c=7; user=Are
类似这样的 一个值,一个分号空格

我们要获取cookie里边的值,就需要按照 分号空格 来拆分
示例:

<script>
    //名字,值,过期时间
    function setCookie(name,value,iDay){

        var date=new Date();

        date.setDate(date.getDate()+iDay);
        document.cookie=name+'='+value+';expires='+date;
    }

    function getCookie(name){
        //先把cookie拆分等到 username=Are,password=123456 这样的值存到arr里边
        var arr =document.cookie.split('; ');

        for(var i=0;i<arr.length;i++){
            //再把arr按照=号拆分,得到Array["username","Are"] Array["password","123456"]这样的值

            var newArr = arr[i].split('=');

            //最后这里再判断是否等我我们的name即可。
            if(newArr[0]==name){
                return newArr[1];
            }
        }

        return '';
    }
    setCookie('username','Are',365)
    setCookie('password','123456',10)

    alert(getCookie('username'));
</script>

运行结果:
在这里插入图片描述

四、删除cookie

删除cookie这里我们使用的方法非常简单,只要要调用setCookie方法,把过期时间设置为-1即可;

<script>
    //名字,值,过期时间
    function setCookie(name,value,iDay){

        var date=new Date();

        date.setDate(date.getDate()+iDay);
        document.cookie=name+'='+value+';expires='+date;
    }

    function getCookie(name){
        //先把cookie拆分等到 username=Are,password=123456 这样的值存到arr里边
        var arr =document.cookie.split('; ');

        for(var i=0;i<arr.length;i++){
            //再把arr按照=号拆分,得到Array["username","Are"] Array["password","123456"]这样的值

            var newArr = arr[i].split('=');

            //最后这里再判断是否等我我们的name即可。
            if(newArr[0]==name){
                return newArr[1];
            }
        }

        return '';
    };

    //删除cookie
    function removeCookie(name){
        //要删除的名字 值 过期时间为昨天 就马上删除;
        setCookie(name,1,-1);
    };

    setCookie('username','Are',365)
    setCookie('password','123456',10)

    removeCookie('username');

    alert(document.cookie);
</script>

运行结果:
在这里插入图片描述
这里我们删除了username,所以就只剩下了password了!

五、记住用户名

登录:
把用户名和密码存进cookie

新打开的时候:
从cookie 读取用户名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记住用户名</title>
    <script>
        //设置cookie 名字,值,过期时间
        function setCookie(name,value,iDay){

            var date=new Date();

            date.setDate(date.getDate()+iDay);
            document.cookie=name+'='+value+';expires='+date;
        }

        //获取cookie
        function getCookie(name){
            //先把cookie拆分等到 username=Are,password=123456 这样的值存到arr里边
            var arr =document.cookie.split('; ');

            for(var i=0;i<arr.length;i++){
                //再把arr按照=号拆分,得到Array["username","Are"] Array["password","123456"]这样的值

                var newArr = arr[i].split('=');

                //最后这里再判断是否等我我们的name即可。
                if(newArr[0]==name){
                    return newArr[1];
                }
            }
            return '';
        };

        //删除cookie
        function removeCookie(name){
            //要删除的名字 值 过期时间为昨天 就马上删除;
            setCookie(name,1,-1);
        };

        window.onload=function(){
            var form = document.getElementById('form');
            var user = document.getElementsByName('user');
            var pass = document.getElementsByName('pass');

            form.onsubmit=function(){
                setCookie('user',user.value,14);
                setCookie('pass',pass.value,14);
            };

            user.value=getCookie('user');
            pass.value=getCookie('pass');
        }
    </script>
</head>
<body>
    <form id="form" action="https://www.baidu.com">
        用户名: <input type="text" name="user"><br>
        密码: <input type="password" name="pass"><br>
        <input type="submit" value="登录">
    </form>
</body>
</html>
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读