cookie

最新推荐文章于 2021-04-03 16:52:53 发布

原创最新推荐文章于 2021-04-03 16:52:53 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

37 篇文章

订阅专栏

cookie

通信协议：

 IP地址：互联网上所有设备的唯一地址
 TCP：面向连接的协议（可靠，又称三次握手，应答式-》即一应一回，无法保证数据发送的顺序及准确率）
 UDP：面向数据的协议（不可靠，发送后不知道对方是否收到）
 HTTP：超文本传输协议，网页传输协议，用于浏览器和服务器（特点：无状态协议，记性差）
 cookie：会话跟踪技术（）本地存储，解决http记不住状态的问题

cookie的特点：

 1.只能使用文本文件（如果浏览器可以随意在客户端机器生成文件，比如身份令牌，那将是个定时炸弹，安全问题会变得非常严重）
 2.只能存字符
 3.文件有大小限制4K
 4.数量限制，小于50条（一般浏览器限制大概在50条左右）
 5.不能跨域（子能拿父，父不能拿子只能由写入cookie的 同一域名 的网页进行读取。简单来说，谁写的cookie，谁才有权利读取）
 6.时间限制（每个cookie有时效，最短的有效期是：会话级别(关闭浏览器，cookie销毁)

为什么cookie要到本地服务器里面？因为cookie附属于HTTP，HTTP要用ajax请求，ajax要在本地服务器下，所以cookie也要 

设置cookie：document.cookie = "user=admin"

注：每次只能设置一次cookie，且里面的字段必须是字符
    里面的值格式是"名字=值"
    中间用" ; "隔开
    配置日期：expires

父级 AAAAA->cookie->cookie.html

  console.log(typeof document.cookie);  //string
  console.log(document.cookie == "");   //false

  document.cookie = "name=admin"
  //设置日期为三天后过期
  var d = new Date();
  d.setDate(d.getDate()+3);
  document.cookie = "age=18;expires=" + d

  document.cookie = "sex = boy;path=/AAAAA"
  console.log(document.cookie)

子级 AAAAA->cookie->cookieBrother->cookietest.html

  //子能拿父，父不能拿子，除非改变所在路径，改变路径后还是要根据父子关系来判断
  document.cookie = "relative=zi";	
  console.log(document.cookie);		//可以拿到父级跟自己的cookie

  document.cookie = "like=ball;path=/AAAAA/cookie"
  console.log(document.cookie);		//cookie可以被父级拿到

cookie封装

  setCookie("name","admim",{
    expires:3
  })
  setCookie("age","18",{
    expires:5,
    path:"/AAAAA"
  })
  //注：删除时要注意路径，一般是它们的默认路径
  removeCookie("age",{
    path:"/AAAAA"
  })
  console.log(getCookie("name"))
  console.log(getCookie("age"))


//设置cookie
  function setCookie(key,val,options){
    options = options || {};
    //初始化日期和路径的字符串
    var expires = path = "";
    //如果传来path值，那么就有路径字符串
    if(options.path){
      path = ";path=" + options.path;
    }
    //如传了expires值，那么就有日期字符串
    if(options.expires){
      var d = new Date();
      d.setDate(d.getDate()+options.expires);
      expires = ";expires=" + d
    }
    document.cookie = `${key}=${val}${path}${expires}`;
  }

//删除cookie
  function removeCookie(key,options){
    options = options || {};
    //表示删除
    options.expires = -1;
    //根据名称删除，与值无关
    setCookie(key,"10",options)
  }

//获取cookie
  function getCookie(key){
    //获取所以，并第一次分割，分割成每对cookie是一个数据
    var arr = document.cookie.split("; ");
    //拿到每一对
    for(var i=0;i<arr.length;i++){
      //再次分割成名称和值两个数据
      if(arr[i].split("=")[0] == key){
        return arr[i].split("=")[1];
      }
    }
    //如果循环结束后还没有返回对应的值，表示没找到，返回空字符
    return ""
  }

记住7天密码

<body>
  <input type="text" id="user"><br/>
  <input type="text" id="pass"><br/>
  <input type="checkbox" id="jz"><label for="jz">记住7天</label>
  <input type="button" id="btn" value="登录">
</body>
<script src="../cookie.js"></script>
<script>

  var ouser = document.getElementById("user");
  var opass = document.getElementById("pass");
  var obtn = document.getElementById("btn");
  var ojz = document.getElementById("jz");
  
  obtn.onclick = function(){
    if(ojz.checked){
      var obj = {
        u:ouser.value,
        p:opass.value
      }
      setCookie("msg",JSON.stringify(obj),{
        expires:7
      })
    }
  }
  
  // var  o = JSON.parse(getCookie("msg"));
  // console.log(o)
  // ouser.value = o.u;
  // opass.value = o.p;
  // console.log(ouser.value)
</script>