day 13 cookie

1.什么是cookie

什么是cookie：会话跟踪技术

会话：用户进行网站，开启浏览器到关闭浏览器的过程称为一次会话

会话跟踪技术:浏览器（客户端）和向服务器之间进行多次请求数据的时，实现数据共享的过程，就是会话跟踪

客户端：就是浏览器

服务器：互联网上的一台电脑，功能强大。

 

2.cookie的存和取

1）document.cookie = "键=值"；//存

2）document.cookie//取   console.log(document.cookie) //返回string（也就是说保存的cookie是字符串）

3）特点：

a.保存在本地电脑硬盘中，不是在内存中

b.如果没有设置有效期，当关闭当前浏览器的会话，下次打开时原来的cookie设     置会自动清除

c.设置有多个信息，在获取时document.cookie，每个cookie信息会以"; "的方式输出    (useName=tom; pwd=123)     cookie保存的信息是字符串

 

3.有效期设置

cookie数据在浏览器上保存的时间，设置有效期就是设置cookie的一个参数expires

关于有效期的问题：

    如果没有设置有效期，cookie数据会在会话结束后自动消失

    如果设置了有效期，cookie会在有效期时间结束后消失

删除cookes,两种方式：

    将键的值设置为"" 

    将有效期设置有-1

有效期设置：

        var time = "2018/11/11";

        var t = new Date(time);

        document.cookie = "uname=tom;expires="+t    （在外面设置的值，则值为空，在后面添上+对应的变量）

删除一条cookie信息

        document.cookie = "uname=;expires="+new Date(0);

4.字符串和对象之间的类型转换问题.(很重要)

原因：cookie中无法保存一个对象类型的数据，只能保存字符串类型，如果需要保存对象格式的数据，必须先把数据转换为字符串类型。

 

1)JSON.stringify(obj),把对象或数组转换成JSON格式的字符串。"[]"或"{}" (注意： 字符串"{}"必须是严格的JSON格式)

2)JSON.parse(str),把JSON格式的字符串转换成对象或数组。

5.cookie保存数组或对象？（主要是怎么使用JSON.stringify(obj),JSON.parse(str)）进行转换得到你想要的东西

var arr=[{name:"tom",pwd:123},{name:"jerry",pwd:456}];

1)document.cookie="arr="+arr;

  console.log(document.cookie);输出的是arr=[object Object],[object Object]

2）var json=JSON.stringify(arr);

    document.cookie="arr="+json;

    console.log(json);//输出的是[{"name":"tom","pwd":123},{"name":"jerry","pwd":456}]

    console.log(document.cookie);//输出的是arr=[{"name":"tom","pwd":123},{"name":"jerry","pwd":456}]

3）再加上一个cookie信息document.cookie="age=23";

然后就存在arr=[{"name":"tom","pwd":123},{"name":"jerry","pwd":456}]; age=23

1.var arr = document.cookie.split("; ");

//就变成[arr=[{"name":"tom","pwd":123},{"name":"jerry","pwd":456}],age=23]

2.var newArr = arr[0].split("=")[1];

//得到这么一串[{"name":"tom","pwd":123},{"name":"jerry","pwd":456}]//是一个字符串

3.alert(JSON.parse(newArr)[0].name)

转成数组，输出的是tom

6.cookie存储注意的问题

1.cookie存储数据不安全

2.cookie存储数据不能超过4kb 最多不能超过50条

3.cookie不能跨域

封装：

//设置cookie的封装

    function setCookie(key,value,date){

        if(date){

            document.cookie = key + "=" + value + "; expires=" + date;

        }else{

            document.cookie = key + "=" + value;

        }

    }

//获取cookie

function getCookie(key){

        //"key1=值1; key2=值2"

        var cookieVal = document.cookie;

        var cookieArr = cookieVal.split("; ");

        for (var i = 0; i < cookieArr.length; i++) {

            var arr = cookieArr[i].split("=");

            if(arr[0] == key){

                return arr[1];//是字符串

            }

        }

        return "";

    }

//删除cookie

function deleteCookie(key){

        document.cookie = key+"=;expires="+new Date(0);

    }

案例，注册登录的案例（重要）要理解得很清楚；