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

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

由于HTTP是一种无状态的协议，服务器单从网络链接上是无法知道客户信息的。这个时候服务器会给客户端（浏览器）颁发一个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链接则不会

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

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

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

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

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

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

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

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

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

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

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

账号：

密码：

提交