码迷,mamicode.com
首页 > 其他好文 > 详细

13、cookie

时间:2018-07-06 21:29:41      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:break   case   客户   加载   https   缓存   用户名   包括   win   

一、cookie:

cookie的应用:
1、用户名密码 自动登录
2、购物车商品的保存。
<1>缓存信息,只存储特定的重要的信息。程序编程完成。缓存信息cookie技术。
<2>浏览器缓存

cookie实现原理:
在本地的客户端的磁盘上以很小的文件 形式保存数据。

【注】IE、火狐、谷歌浏览器的cookie,在服务器环境下才能生效。

cookie是一个字符串,键/值对组成的字符串。
【注】1、name和value必须有的。
???2、大括号里面的键值对是可选项,按照需求进行添加。

name=value;[expires=date];[path=path];[domain=somewhere.com];[secure]

cookie设置成功以后,存储在,以当前url中域名命名的文件夹中

name=value

//设置cookie
// document.cookie = "username=tianyufei";

        //获取cookie

        // alert(document.cookie);

expires=日期对象
过期日期:
1、如果不设置,默认会话,当前会话结束的时候/当你关闭掉当前窗口的时候,cookie消失。

        /*
            n天后的日期
        */
        function getNumOfDate(n){
            var d = new Date();
            var day = d.getDate();
            d.setDate(day + n);
            return d;
        }
        //http://10.30.155.73/cookie/01cookie.html
        //http://localhost/cookie/01cookie.html
        //http://127.0.0.1/cookie/01cookie.html
        // alert(getNumOfDate(7));

一般情况下,在存储cookie的时候
1、现将中文转成字符存储。 utf-8(3个字符表示一个函数) gbk(2个字符表示一个汉字)
2、读取,将字符转成中文读取。

encodeURIComponent 编码
decodeURIComponent 解码

            // document.cookie = "超级英雄=钢铁侠;expires=" + getNumOfDate(7);

            // alert(document.cookie);

            // document.cookie = encodeURIComponent("超级英雄") + "=" + encodeURIComponent("钢铁侠") + ";expires=" + getNumOfDate(7);

            // alert(decodeURIComponent(document.cookie));

了解:path、domain、secure

path 限制访问路径
如果不设置,默认是,当前加载的html页面的路径
【注】访问的路径和存储cookie路径必须一致,不一致就禁止访问。

            // document.cookie = "username=tian;expires=" + getNumOfDate(7) + ";path=" + "/cookie/code/";

            // alert(document.cookie);

domain 限制访问域名 主机名/IP
如果不设置,默认是,当前加载该页面的主机名。
【注】如果存储cookie的时候,domain中设置的域名,和访问的域名不一样。存储cookie失败。

            /*document.cookie = "username=tian;expires=" + getNumOfDate(7) + ";domain=" + "10.30.155.74";
            alert(1);*/

secure 安全性
默认false
任何来源的网站都可以访问cookie,限制访问协议
http https

设置,变成true,只能被https协议访问。https协议更安全,证书认证。
【注】只能由https协议访问和存储。

            document.cookie = "username=tian;expires=" + getNumOfDate(7) + ";secure";

2、封装cookie

设置cookie
setCookie()

取出cookie
getCookie()

删除cookie
removeCookie()

        //name=value;[expires=date];[path=path];[domain=somewhere.com];[secure]

        /*
            【注】expires 只穿过期的天数
        */
        function setCookie(name, value, expires, path, domain, secure){
            //1、编码去存  name=value
            var cookieStr = encodeURIComponent(name) + "=" + encodeURIComponent(value);
            //2、判断
            if(expires){
                cookieStr += ";expires=" + getNumOfDate(expires);
            }
            if(path){
                cookieStr += ";path" + path;
            }
            if(domain){
                cookieStr += ";domain" + domain;
            }
            if(secure){
                cookieStr += ";secure";
            }

            document.cookie = cookieStr;
        }

        function removeCookie(name){
            document.cookie = encodeURIComponent(name) + "=;expires=" + new Date(0);
        }

        /*
            n天后的日期
        */
        function getNumOfDate(n){
            var d = new Date();
            var day = d.getDate();
            d.setDate(day + n);
            return d;
        }



        setCookie("变种人", "镭射眼", 7);
        setCookie("七龙珠", "弗利萨", 30);
        setCookie("火影忍者", "鬼鲛", 100);


        // document.cookie = encodeURIComponent("变种人") + "=;expires=" + new Date(0);
        /*
            快速获取过去某一时刻
        */
        // alert(new Date(0));


        /*
            变种人=镭射眼; 七龙珠=弗利萨; 火影忍者=鬼鲛
        */
        /*
            cookie 过期以后,就自动清除了
            如果过期时间,设置,过去的某一个时间。
            【注】删除cookie,过期时间设置成过去某一时刻。
        */



        alert(decodeURIComponent(document.cookie));

        removeCookie("变种人");
        

        alert(decodeURIComponent(document.cookie));
        

3、对象传参,cookie封装_进阶

        /*
            【注】expires 只穿过期的天数
        */

设置cookie
setCookie()

        function setCookie(name, value, expires, path, domain, secure){
            //1、编码去存  name=value
            var cookieStr = encodeURIComponent(name) + "=" + encodeURIComponent(value);
            //2、判断
            if(expires){
                cookieStr += ";expires=" + getNumOfDate(expires);
            }
            if(path){
                cookieStr += ";path=" + path;
            }
            if(domain){
                cookieStr += ";domain=" + domain;
            }
            if(secure){
                cookieStr += ";secure";
            }

            document.cookie = cookieStr;
        }

删除cookie
removeCookie()

        function removeCookie(name){
            document.cookie = encodeURIComponent(name) + "=;expires=" + new Date(0);
        }


        /*
            传入对应的键
            返回对应的值

            字符串处理
        */

取出cookie
getCookie()

        function getCookie(name){
            var cookieStr = decodeURIComponent(document.cookie);
            var start = cookieStr.indexOf(name);
            if(start == -1){
                return null;
            }else{
                //找到了,找结束的位置
                var end = cookieStr.indexOf(";", start);
                if(end == -1){
                    //最后一个
                    end = cookieStr.length;
                }
            }
            //提取键值对
            var subStr = cookieStr.substring(start, end);
            //变种人=镭射眼
            var arr = subStr.split("=");
            return arr[1];
        }

        /*
            n天后的日期
        */
        function getNumOfDate(n){
            var d = new Date();
            var day = d.getDate();
            d.setDate(day + n);
            return d;
        }



        setCookie("变种人", "镭射眼", 7);
        setCookie("七龙珠", "弗利萨", 30);
        setCookie("火影忍者", "鬼鲛", 100);


        // document.cookie = encodeURIComponent("变种人") + "=;expires=" + new Date(0);
        /*
            快速获取过去某一时刻
        */
        // alert(new Date(0));


        /*
            变种人=镭射眼; 七龙珠=弗利萨; 火影忍者=鬼鲛
        */
        /*
            cookie 过期以后,就自动清除了
            如果过期时间,设置,过去的某一个时间。
            【注】删除cookie,过期时间设置成过去某一时刻。
        */

        alert(getCookie("变种人"));  //0  7
        alert(getCookie("七龙珠"));  //9  16
        alert(getCookie("火影忍者"));//18  -1


        /*alert(decodeURIComponent(document.cookie));

        removeCookie("变种人");
        

        alert(decodeURIComponent(document.cookie));*/
        

4、cookie究极封装

前面的:
设置cookie
setCookie()
取出cookie
getCookie()
删除cookie
removeCookie()
获取日期 getNumOfDate()
都必须有.

分析: $_cookie() 实现 setCookie getCookie removeCookie
根据参数不同,可以将$_cookie设置三种不同的功能。

                setCookie
                $_cookie(name, value);
                $_cookie(name, value, obj);

                getCookie
                $_cookie(name)

                removeCookie
                $_cookie(name, null);
            function $_cookie(name, value, obj){
                //1、判断传入的参数个数
                switch(arguments.length){
                    case 3:
                        setCookie(name, value, obj);
                        break;
                    case 2:
                        if(value == null){
                            //removeCookie
                            removeCookie(name);
                        }else{
                            setCookie(name, value);
                        }
                        break;
                    case 1: //获取cookie
                        return getCookie(name);
                        break;
                    default:
                        alert("error");
                        break;
                }
            }


            $_cookie("变种人", "万磁王", {
                expires: 7
            })

            $_cookie("七龙珠", "贝吉塔", {
                expires: 30
            })

            $_cookie("火影忍者", "日向宁次", {
                expires: 100
            })


            alert(decodeURIComponent(document.cookie));

            // alert($_cookie("七龙珠"));
            $_cookie("七龙珠", null);


            alert(decodeURIComponent(document.cookie));

登录Cookie

        <style>
            #login{
                width: 200px;
                height: 100px;
                background-color: orange;
                border: 1px solid black;
                margin: 100px auto;
                text-align: center;
                padding: 40px
            }
            #login input{
                width: 200px;
                height: 24px;
                font-size: 16px;
                margin-bottom: 10px

            }
            #btn1{
                width: 100px;
                height: 25px;
                background-color: gray;
                color: white;
                font-size: 15px
            }
        </style>
        <script src = "js/tool.js"></script>
        <script>
            /*
                1、第一次登录,输入用户名和密码
                2、登录成功
            */
            window.onload = function(){
                //加载页面完成,判断之前是否存储过username这个cookie
                var usernameStr = $_cookie("username");
                // alert(usernameStr);
                if(usernameStr){
                    $("#login").innerHTML = "欢迎回来";
                }



                $("#btn1").onclick = function(){
                    //发送用户名和密码,进行登录操作
                    //将用户名和密码缓存
                    $_cookie("username", $("#username").value, {
                        expires: 7
                    })
                    $_cookie("password", $("#password").value, {
                        expires: 7
                    })

                    alert("第一次登录成功");
                }
            }
        </script>
    </head>
    <body>
        <div id = "login">
            <input id = "username" type="text" placeholder="用户名" />
            <input id = "password" type="password" placeholder="密码" />
            <br/>
            <button id = "btn1">登录</button>
        </div>
    </body>

二、ECMA5

1、严格模式

严格模式:更严格的语法

【注】想在哪个作用域下,使用严格模式,在哪个作用域下,写下面这句话。
=="use strict"==

【注】一般情况下不要写在全局作用域。

            function show(){
                "use strict";
                a = 10; //强制声明称全局变量
            }

            show();
            alert(a);

2、bind

强制修改函数中this指向
格式:函数.call(第一个参数传this的指向);

            function show(num1, num2){
                alert(this);
                alert(num1 + ‘,‘ + num2);
            }
            // show(); //object Window
            // show.call("hello", 10, 20);

apply
格式:函数.apply()
后续参数:直接放在一个数组中,当做第二个参数传入。

        // show.apply("world", [10, 20]);

【注】上述两个方法,是在函数调用的时候强制修改this指向。
/*

bind()
【注】预设this的指向。
返回值:还这个函数,这个函数的this,已经被预先设定。

        */
        var show2 = show.bind("helloworld");

        // show2(30, 40);
        show.bind("helloworld")(30, 40);

bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。

3、数组方法

++重点++:==indexOf filter forEach==
其他了解。

==indexOf==
格式:数组.indexOf(元素, start)
从start开始,找元素第一次在数组中出现的位置。
返回值:返回-1没有找到, 返回>=0,找到

            /*var arr = [10, 20, 30, 40, 50, 40];
            alert(arr.indexOf(40, 4));*/

==forEach 遍历数组==
格式:
数组.forEach(function(item, index, array){
???item 当前遍历到的元素
???index 当前遍历到的下标
???array 当前遍历的数组本身
})

            // var arr = [10, 20, 30, 40, 50];
            /*arr.forEach(function(item, index, array){
                alert("item:" + item + ", index:" + index);
            })*/

            // arr.forEach(alert);
            // arr.forEach(console.log);

map 映射

            /*var arr = [10, 20, 30, 40, 50];
            var newArr = arr.map(function(item, index, array){
                return item + 5;
            })
            alert(arr);
            alert(newArr);*/

reduce 归并

            var arr = [10, 20, 30, 40, 50];
            var tmp = arr.reduce(function(pre, next, index, array){
                /*
                    pre  上一次遍历,return 后面表达式的值
                    next 当前遍历到的元素 从下标1开始遍历
                */
                // alert(pre + ", " + next);
                return pre + next;
            })
            // alert(tmp);

==filter 过滤==
return 后面写过滤条件

            var arr = [10, 20, 30, 40, 50];
            var newArr = arr.filter(function(item, index, array){
                return item > 30;
            })
            // alert(newArr);

some
判断,这个数组中,是否有符合return后面表达式条件的元素。
返回:布尔值
【注】如果找到符合条件的元素,直接终止。

            var arr = [10, 20, 30, 40, 50];
            var res = arr.some(function(item, index, array){
                // alert(item + ", " + index);
                return item > 30;
            })
            // alert(res)

every
判断,这个数组中,所有元素都必须符合return后面表达式的要求。
返回值:布尔值
【注】只要找不符合条件,就直接终止,返回结果false

            var arr = [10, 20, 30, 40, 50];
            var res = arr.every(function(item, index, array){
                alert(item + ", " + index);
                return item < 30;
            })

            alert(res);

4、字符串

trim
格式:字符串.trim()
功能:去除,首部尾部空格。

            var str = "    he  l  lo    ";
            alert("|" + str + "|");
            alert("|" + str.trim() + "|");

三、ECMA6

1、let关键字

ECMA6
var 用关键字 let代替

通过var声明的变量,作用域以==函数的大括号==为界限的,

通过let声明的变量,作用域以==大括号==为界限的,++包括if for swtich++

            /*if(true){
                var num = 10;
                alert(num);
            }

            alert(num);*/

            /*if(true){
                let num = 10;
                alert(num);
            }

            alert(num);*/


            /*for(var i = 0; i < 5; i++){
                setTimeout(function(){
                    alert(i);
                }, 2000);
            }*/

            /*for(let i = 0; i < 5; i++){
                setTimeout(function(){
                    alert(i);
                }, 2000);
            }


            alert("循环执行完了");*/


            /*for(var i = 0; i < 5; i++){
                for(var i = 0; i < 5; i++){
                    console.log(i);
                }
            }*/

            for(let i = 0; i < 5; i++){
                for(let i = 0; i < 5; i++){
                    console.log(i);
                }
            }

2、const

var let 声明变量
const 声明不可修改的变量/常量

            var num = 100;
            num = 20;
            alert(num);*/

            /*const IP = "10.30.155.73";

            alert(IP);
            IP = 10;
            alert(IP);

3、箭头函数

            function show(){
                alert(123);
            }
            show();

声明函数的方式进行简化 箭头函数

            /*function add(num1, num2){
                return num1 + num2;
            }*/

            var add = (num1, num2) => num1 + num2;

            alert(add(10, 20));

13、cookie

标签:break   case   客户   加载   https   缓存   用户名   包括   win   

原文地址:https://www.cnblogs.com/zhongchao666/p/9275529.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!