JavaScript学习的第二十一天（1）

一、JavaScript的cookie

cookie是用来储存web页面的用户信息

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

获取 document.cookie

console.log(document.cookie);

设置

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

    document.cookie="name=张三";
    document.cookie="age=20";

设置有效期

document.cookie="name=张三;expires=Mon May 09 2022 10:32:51";

设置之前的时间  删除

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的方法封装 

封装

1.相同部分  不做处理

2.不同部分  使用参数表示

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

        // 转换为数组
        var arr = document.cookie.split("; ");
        // console.log(arr);

        // 将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])
            }

        }
    }

设置

    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);

删除  设置失效时间为之前的时间

    function removeCookie(key) {
        setCookie(key,"",-1)
    }

清空

    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页面浏览器打开期间  关闭清除

属性

length  缓存数据的条数

console.log(window.sessionStorage.length);
var aBtns=document.getElementsByTagName("button");

设置  sessionStorage.setItem("key","value");

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

获取  sessionStorage.getItem("key")

    aBtns[1].onclick=function(){
        console.log(sessionStorage.getItem("name"))
    }

删除  sessionStorage.removeItem("key")

    aBtns[2].onclick=function(){
        sessionStorage.removeItem("name")
    }

清空  sessionStorage.clear()

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

四、localStorage

本地缓存

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

属性

length  缓存数据的条数

console.log(window.localStorage.length);
var aBtns=document.getElementsByTagName("button");

设置  localStorage.setItem("key","value");

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

获取  localStorage.getItem("key")

    aBtns[1].onclick=function(){
        console.log(localStorage.getItem("name"))
    }

删除  localStorage.removeItem("key")

    aBtns[2].onclick=function(){
        localStorage.removeItem("name")
    }

清空  localStorage.clear()

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

五、AJAX 

form表单请求

 - 表单用来收集用户信息

 - 将用户信息提交给服务器

 - action:提交内容(服务器)的地址

   method:提交方式  get  post

<form action="http://146.56.207.108:3000/Handler/UserHandler?action=login" method="post">
     账号：<input type="text" name="userName"><br>
     密码：<input type="password" name="password"><br>
     <button>提交</button>
</form>
<form action="http://146.56.207.108:3000/Handler/citys" method="get">
     <!-- <input type="text" name="courseName"><br>
     <input type="text" name="sysId"><br> -->
     <input type="text" name="name"><br>
     <button>提交</button>
</form>

账号：<input type="text"><br>
密码：<input type="password"><br>
<button>提交</button>

同步异步

接口文档 

登录

 - 请求地址:http://146.56.207.108:3000/Handler/UserHandler?action=login

 - 请求方式:post

 - 请求参数:

key	value
userName	用户名
password	密码

 - 返回数据

err:请求失败   失败原因

success:请求成功

data:

key	value
userName	用户名
phone	手机号
email	邮箱

获取首页数据

 - 请求地址:http://146.56.207.108:3000/Handler/CourseHandler?action=indexshow

 - 请求方式:get

- 请求参数:

 key             value

- 返回数据

 err:请求失败   失败原因

success:请求成功

data:

key	type	value
bannerList	array	置顶轮播图
newList	array	最新课程列表