JavaScript学习第二十一天

JavaScript的cookie

 - cookie是用来储存web页面的用户信息。
 - 由于HTTP是一种无状态的协议，服务器单从网络链接上是无法知道客户信息的。这个时候服务器会给客户端（浏览器）颁发一个cookie，用来确认用户的信息。

    1. 获取   document.cookie    console.log(document.cookie);

    2. 设置   
     document.cookie="name=value;domain=.domain.com;path=/;expires=;"

    document.cookie="name=张三";
    document.cookie="age=20";
    
     2.1 设置有效期
     document.cookie="name=张三;expires=Mon May 09 2022 10:32:51";

     2.2设置之前的时间  删除
     document.cookie="name=张三;expires=Mon May 08 2022 10:32:51";
    
    · name:一个唯一确定的cookie名称。通常cookie名称不区分大小写
    · value:存储在cookie中的字符串值。最好为cookie的name和value进行url编码
    · domain:cookie对哪个域是有效的  域名 www.baidu.com
    · path:表示这个cookie影响到的路径，浏览器会根据这个配置项，向指定的域中匹配的路径发送cookie
    · expires:失效时间  表示cookie何时被删除（停止向服务器发送cookie） 时间值是GMT格式的  设置过去的时间，直接删除  默认为会话缓存（关闭浏览器删除）
    · max-age:与expires效果相同  max-age优先级高于expires
    · httpOnly:告知浏览器不允许通过脚本document.cookie去更改这个值，同样这个值在document.cookie中也不可见。但在http请求者仍然会携带这个cookie。注意这个值虽然在脚本中不可获取，但仍然在浏览器安装目录中以文件形式存在。这项设置通常在服务器端设置。
    · secure:安全标志，指定后，只有在使用SSL链接时才能发送到服务器，如果是http链接则不会

cookie的方法封装

     - cookie是用来储存web页面的用户信息。
     - 由于HTTP是一种无状态的协议，服务器单从网络链接上是无法知道客户信息的。这个时候服务器会给客户端（浏览器）颁发一个cookie，用来确认用户的信息。


    - 封装
     ①.相同部分  不做处理
     ②.不同部分  使用参数表示

     1. 获取   document.cookie
     console.log(document.cookie);

     function getCookie(key) {
        // age=20; name2=猪八戒; name3=沙僧; name=孙悟空

        1.1 转换为数组
        var arr = document.cookie.split("; ");
        // console.log(arr);
        
        1.2 将arr进行遍历
        for (var i = 0; i < arr.length; i++) {
            // console.log(arr[i])
            // if(arr[i].match(key)!=null)
            // if(arr[i].search(key)!=-1){
            //     console.log(arr[i].substring(arr[i].indexOf("=")+1))
            // }

            var arrItem = arr[i].split("=");
            // console.log(arrItem);
            if (arrItem[0] == key) {
                console.log(arrItem[1])
            }

        }
    }
    // getCookie("name2");


    2. 设置 
    // document.cookie="name=value;expires=time";
    function setCookie(name, value, time) {
        var oDate = new Date();
        oDate.setDate(oDate.getDate() + time); //设置过去时间 以天计数
        // document.cookie=name+"="+value+";expires="+time;
        document.cookie = `${name}=${value};expires=${oDate}`;
    }

    setCookie("name", "孙悟空", 30);
    setCookie("name2", "猪八戒", 20);
    setCookie("name3", "沙僧", 10);

    3. 删除  设置失效时间为之前的时间
    function removeCookie(key) {
        setCookie(key,"",-1)
    }

    4. 清空
    function clearCookie(){
        var arr = document.cookie.split("; ");
        for(var i=0;i<arr.length;i++){
            var arrItem = arr[i].split("=");
            setCookie(arrItem[0],"",-1)
            // console.log(arrItem)
        }
    }    

sessionStorage 会话缓存

    缓存时间为当前tab页面浏览器打开期间  关闭清除

     window.sessionStorage 对象

    1. 属性
     length  缓存数据的条数
    console.log(window.sessionStorage.length);

    var aBtns=document.getElementsByTagName("button");

    1.1 设置  sessionStorage.setItem("key","value");
    aBtns[0].onclick=function(){
        sessionStorage.setItem("name","孙悟空");
    }

    1.2 获取  sessionStorage.getItem("key")
    aBtns[1].onclick=function(){
        console.log(sessionStorage.getItem("name"))
    }
    
    1.3 删除  sessionStorage.removeItem("key")
    aBtns[2].onclick=function(){
        sessionStorage.removeItem("name")
    }

    1.4 清空  sessionStorage.clear()
    aBtns[3].onclick=function(){
        sessionStorage.clear()
    }

localStorage 本地缓存

     缓存时间为永久  除非手动删除

     window.localStorage 对象

    1. 属性
     length  缓存数据的条数
    console.log(window.localStorage.length);

    var aBtns=document.getElementsByTagName("button");

    1.1 设置  localStorage.setItem("key","value");
    aBtns[0].onclick=function(){
        localStorage.setItem("name","孙悟空");
    }

    1.2 获取  localStorage.getItem("key")
    aBtns[1].onclick=function(){
        console.log(localStorage.getItem("name"))
    }
    
    1.3 删除  localStorage.removeItem("key")
    aBtns[2].onclick=function(){
        localStorage.removeItem("name")
    }

    1.4 清空  localStorage.clear()
    aBtns[3].onclick=function(){
        localStorage.clear()
    }    

补充

JavaScript全局属性和方法

    1. 属性
    1.1 Infinity  代表正的无穷大的数值
    console.log(window.Infinity);
    console.log(Number.POSITIVE_INFINITY);
    console.log(3/0);
    console.log(-1/0);

    1.2 NaN 指示某个值 不是一个数字   Not a Number
    console.log(window.NaN);
    console.log(typeof window.NaN);
    console.log(NaN==NaN);//false

    1.3 undefined  指未定义的值
    console.log(window.undefined);
    var a;
    console.log(a);

    2. 全局方法
    2.1 eval()  计算JavaScript字符串，并把它作为脚本代码执行
    console.log(window.eval("1"+"1"));

    var url="file:///D:/%E8%AF%BE%E7%A8%8B/web21/JavaScript/BOM/%E8%A1%A5%E5%85%85/01.JavaScript%E5%85%A8%E5%B1%80%E5%B1%9E%E6%80%A7%E5%92%8C%E6%96%B9%E6%B3%95.html";

    2.2 decodeURI()  解码某个编码的URL
    console.log(decodeURI(url));
     
     encodeURI()  将字符串编码为URI
    console.log(encodeURI("统一台湾"));
    console.log(decodeURI(encodeURI("统一台湾")));
    document.cookie="name="+encodeURI("张三");
    
    2.3 decodeURIComponent()  解码一个编码的URI组件
     encodeURIComponent()  把字符串编码为URI组件

    2.4 escape()  对字符串进行编码
    console.log(escape("统一台湾"));
     unescape()  对由escape()编码的字符串进行解码
    console.log(unescape(escape("统一台湾")));

    2.5 isFinite()  检查某个值是否为有穷大的数
    console.log(isFinite(1));
    console.log(isFinite(1/0));
    console.log(Number.isFinite(1));

    2.6 isNaN()  检查某个值 是否不是一个数字
    console.log(isNaN(10));
    console.log(Number.isNaN(NaN));//true  

    2.8 Number()  把对象的值转换为数字
    console.log(Number("100"));
     parseFloat()
     parseInt()
     String()    

JavaScript的console对象

     console.log(window.console);

     log()  控制台输出一条日志
    console.log("打印日志");
     info()  控制台输出一条信息
    console.info("打印信息");

    1. warn(name,message)  输出警告信息，信息前面加一个黄色三角，表示警告
    console.warn("警告","有人睡着了");
    2. error(name,message)  输出错误信息到控制台,信息前面加一个红色X 表示错误
    console.error("错误","开始做俯卧撑");

    3. clear()  清空控制台信息
     console.clear();

    4. time()  计时器,开始计时   与timeEnd()联合使用，用于算出一个操作花费的准确时间
     timeEnd()  计时结束
    console.time();
    for(var i=0;i<100;i++){

    }
    console.timeEnd();

    5. count()  记录 count() 调用的次数，一般用于计数
    for(var i=0;i<10;i++){
        console.count("计数");
    }

    6. table()  以表格形式显示数据
    var arr=["孙悟空","猪八戒","沙和尚"];
    console.table(arr);
    var person={
        name:"孙悟空",
        age:500
    }
    console.table(person);


    7. group()	在控制台创建一个信息分组。 一个完整的信息分组以 console.group() 开始，console.groupEnd() 结束
    
     groupCollapsed()	在控制台创建一个信息分组。 类似 console.group() ，但它默认是折叠的。
    
     groupEnd()	设置当前信息分组结束
    
     console.group();//分组开始  默认展开
    console.groupCollapsed();
    console.log(1);
    console.log(2);
    console.log(3);
    console.log(4);
    console.groupEnd();

    9. assert("判断语句","判断条件不成立输出内容")  如果断言为false，则在控制台输出错误信息
    console.assert(10>12,"10<12");

    10. trace()  显示当前执行的代码在栈堆中调用的路径。
    function a(){
        b();
    }
    function b(){
        console.trace();
    }
    a();   

JavaScript中undefined和null的区别

     undefined null  在js中都表示 “无”
    
     var a=null;
     var a=undefined;

    if(!null){
        console.log("is not null")
    }
    if(!undefined){
        console.log("is not undefined")
    }

    console.log(null==undefined);//true 

    console.log(Number(null));//0
    console.log(Number(undefined));//NaN


    1. ①null是一个表示“无”的对象，转换为数值为0
      ②undefined是一个表示“无”的初始值，转换为数值为NaN

    2.null的用于
     ①.作为函数的参数,表示改函数的参数不是对象
     ②.作为对象原型链的终点
     ③.清空变量

    3. undefined的用法
     ①.变量被声明了，但是没有赋值时，返回 undefined
     ②.调用函数时，应该提供参数但是没有提供，该参数为undefined
     ③.对象没有赋值的属性，该属性值为undefined
     ④.函数没有返回值时，默认返回undefined

    function func(a){
        console.log(a)
    }
    func();
    var person={
        name:"张三"
    }
    console.log(person.age)

    function b(){
        // return 10
    }
    console.log(b());    

JavaScript的void关键字

    javascript:void(0) 中最关键的是 void 关键字, void是JavaScript中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值

     语法:
    // javascript:void func()
    javascript:void(func())    

JavaScript中的debugger

     1.debug  调试

    for(var i=0;i<10;i++){
         console.log(i)
     }

     2.如何在js代码中手动造成/添加一个断点效果？
     debugger

     if(true){
         debugger;
     }

    for(var i=0;i<10;i++){
        debugger;
        console.log(i)
    }