前端存储-cookie

一、cookie是什么

HTTP协议本身是无状态的,即服务器无法判断用户身份。Cookie实际上是一小段的文本信息(key-value格式)。客户端向服务器发起请求,如果服务器需要记录该用户状态,就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时,浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie,以此来辨认用户状态。

cookie机制

当用户第一次访问并登陆一个网站的时候,cookie的设置以及发送会经历以下4个步骤:

客户端发送一个请求到服务器 ==> 服务器发送一个HttpResponse响应到客户端,其中包含Set-Cookie的头部 ==> 客户端保存cookie,之后向服务器发送请求时,HttpRequest请求中会包含一个Cookie的头部 ==> 服务器返回响应数据

cookie属性项

属性项属性项介绍
NAME=VALUE键值对,可以设置要保存的 Key/Value,注意这里的 NAME 不能和其他属性项的名字一样
Expires过期时间,在设置的某个时间点后该 Cookie 就会失效
Domain生成该 Cookie 的域名,如 domain=“www.baidu.com”
Path该 Cookie 是在当前的哪个路径下生成的,如 path=/wp-admin/
Secure如果设置了这个属性,那么只会在 SSH 连接时才会回传该 Cookie

Expires

该属性用来设置Cookie的有效期。Cookie中的maxAge用来表示该属性,单位为秒。Cookie中通过getMaxAge()和setMaxAge(int maxAge)来读写该属性。maxAge有3种值,分别为正数,负数和0。

如果maxAge属性为正数,则表示该Cookie会在maxAge秒之后自动失效。浏览器会将maxAge为正数的Cookie持久化,即写到对应的Cookie文件中(每个浏览器存储的位置不一致)。无论客户关闭了浏览器还是电脑,只要还在maxAge秒之前,登录网站时该Cookie仍然有效。
当maxAge属性为负数,则表示该Cookie只是一个临时Cookie,不会被持久化,仅在本浏览器窗口或者本窗口打开的子窗口中有效,关闭浏览器后该Cookie立即失效。

Cookie的域名

Cookie是不可以跨域名的,隐私安全机制禁止网站非法获取其他网站的Cookie。

正常情况下,同一个一级域名下的两个二级域名也不能交互使用Cookie,比如test1.mcrwayfun.com和test2.mcrwayfun.com,因为二者的域名不完全相同。如果想要mcrwayfun.com名下的二级域名都可以使用该Cookie,需要设置Cookie的domain参数为.mcrwayfun.com,这样使用test1.mcrwayfun.com和test2.mcrwayfun.com就能访问同一个cookie

Cookie的路径

path属性决定允许访问Cookie的路径。比如,设置为"/"表示允许所有路径都可以使用Cookie

Cookie的前端设置、获取与删除

let cookie = {
    /**
     * 设置cookie方法
     * @param key{string} cookie名称
     * @param val{string} cookie值
     * @param hours{number} 过期时间(小时)
     */
    set: function (key, val, hours) {
      let date = new Date(); //获取当前时间
      let expiresHours = parseInt(hours);  //将date设置为n小时以后的时间
      date.setTime(date.getTime() + expiresHours * 24 * 3600 * 1000); //格式化为cookie识别的时间
      document.cookie = key + "=" + val + ";expires=" + date.toGMTString();  //设置cookie
    },
    /**
     * 移除cookie方法
     * @param key{string} cookie名称
     */
    remove: function (key) {
      this.set(key, "", 0)
    },
    /**
     * 获取cookie方法
     * @param key{string} cookie名称
     * @returns {string} 对应名称的cookie值
     */
    get: function (key) {//获取cookie方法
      /*获取cookie参数*/
      let getCookie = document.cookie.replace(/[ ]/g, "");  //获取cookie,并且将获得的cookie格式化,去掉空格字符
      let arrCookie = getCookie.split(";")  //将获得的cookie以"分号"为标识 将cookie保存到arrCookie的数组中
      let tips = "";  //声明变量tips
      for (let i = 0; i < arrCookie.length; i++) {   //使用for循环查找cookie中的tips变量
        let arr = arrCookie[i].split("=");   //将单条cookie用"等号"为标识,将单条cookie保存为arr数组
        if (key === arr[0]) {  //匹配变量名称,其中arr[0]是指的cookie名称,如果该条变量为tips则执行判断语句中的赋值操作
          tips = arr[1];   //将cookie的值赋给变量tips
          break;   //终止for循环遍历
        }
      }
      return tips;
    }
  }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值