JavaScript - cookie学习

Posted 2021-06-17 WHOVENLY

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript - cookie学习相关的知识，希望对你有一定的参考价值。

今天遇到一个需求，需要通过做一个用户登录的功能，并且需要使浏览器可以保存其登录信息，使得用户下次再访问网页的时候无需再次进行登录操作，那么这时就想到使用cookies进行信息保存。

一、cookie介绍

1.定义

cookie是一种用来在客户端硬盘上存储信息的手段，可以用来存储一些信息，实现一些特殊的效果，例如实现多少天内免登陆，或者存储一些小数据。

2.字段含义

cookie中所有的字段设置我们都是通过；去进行分割。

key=value（键=值）就是 cookie的一个键值对，一般是根据key拿到对应的value
expires（过期时间）设置该cookie的过期时间，expires=GMT的时间字符串，例如要7天免登陆，就可以设置过期时间为今天开始的7天之后的日期。如果不设置过期时间，默认浏览器关闭该cookie就消失了。
path（路径） cookie并不是在哪里都能够获取到的。在网站中分为很多目录，可能很多目录中不需要使用到cookie，所以可以设置cookie的路径，这样更加安全，避免任意目录都能访问到该cookie。通过 path=/E:javascript/test 这样只能在该目录下才能获取到该cookie
domain（域）默认该cookie在该cookie所在域名下才能够访问到，但是有时候a.chaijinsong.com需要访问b.chaijinsong.com下的cookie，这时候就需要设置domain=chaijinsong.com。这样两个子域名都可以访问该cookie
secure（安全性）默认secure是为false的，即通过http协议来传输，但是如果 secure=true 的话，就只能t通过https来进行传输

3.条件

需要注意的是，cookie 只有在服务环境下才能设置，所以如果只是自己在本地练习cookie的话，可以使用webstorm编辑器，它内部自带服务环境，如果是使用vscode编辑器的小伙伴，需要去下载Live Server 插件，右击运行时选择【Open with Live Srever】查看效果即可。

二、设置cookie

1.简单的cookie设置

如下代码所示，设置了一个key为name，value为huanan的cookie。

document.cookie = "name=huanan";

在浏览器中该cookie的具体信息如下：可以看到该cookie的到期时间为浏览会话结束时，这是因为我们并未给该cookie设置到期时间，所以该cookie在会话关闭的时候就会被清除。
在这里插入图片描述

2.带有过期时间的cookie设置

如下代码所示，设置了一个key为name，value为张三的cookie，并且设置了过期时间为5天后。

var exdate = new Date();//获取当前时间
exdate.setDate(exdate.getDate() + 5);//获取当前时间+5天后的日期
// toUTCString() 是将时间根据世界时转换为字符串
document.cookie = "name=张三;" + "expires=" + exdate.toGMTString();

在浏览器中该cookie的具体信息如下：可以看到该cookie的到期时间为创建时间+5天，说明过期时间设置成功。
在这里插入图片描述

3.注意

如果要设置多条cookie，必须一条条创建，不能批量设置。

//设置第一条cookie
document.cookie = "name=huanan";
//设置第二条cookie
document.cookie = "age=19";

三、获取cookie

1.查看cookie

获取cookie前，可以先查看下当前的cookie数据。

console.log(document.cookie)

控制台打印信息如下：即所有的cookie都保存在一个字符串中。
在这里插入图片描述

2.获取cookie值

通过查看cookie值，所知需要获得相应的cookie值我们可以通过字符串的一些方法配合使用截取该cookie字符串中我们想要的value值。具体代码如下所示：

var name = "age";
    // 获取该key首个字符在字符串中的下标位置
    var index = document.cookie.indexOf(name);
    console.log("index", index);
    // 判断是否有这个cookie存在
    if (index != -1) {
      //   获取该value值首个字符在字符串中的下标位置
      index = index + name.length + 1;
      //   获取value值最后一个字符的位置
      end = document.cookie.indexOf(";", index);
      if (end == -1) {
        end = document.cookie.length;
      }
      //得到想要的cookie的值
      var value = unescape(document.cookie.substring(index, end));
      console.log("vale", value);
    } else {
      console.log("不存在该cookie");
    }

四、删除cookie

删除cookie就比较简单了，我们只需要重新设置改cookie的过期时间比当前时间更早即可。

var name = "age";
var date = new Date();
date.setTime(date.getTime() - 10000);
document.cookie = name + "=v; expires=" + date.toGMTString();

五、方法封装

1.设置cookie

function setCookie(name, value, expiredays) {
      var exdate = new Date();
      exdate.setDate(exdate.getDate() + expiredays);
      document.cookie = name + "=" + escape(value) + (expiredays == null ? "" : ";expires=" + exdate.toGMTString());
    }

2.获取cookie

function getCookie(name) {
  var cookies = document.cookie;
  var cookie_pos = cookies.indexOf(name);
  if (cookie_pos != -1) {
     cookie_pos = cookie_pos + name.length + 1;
     var cookie_end = cookies.indexOf(";", cookie_pos);
     if (cookie_end == -1) {
        cookie_end = cookies.length;
     }
     var value = unescape(cookies.substring(cookie_pos, cookie_end));
  } else {
    console.log("不存在该cookie");
  }
  return value;
}

3.删除cookie

function delCookie(name) {
   var date = new Date();
   date.setTime(date.getTime() - 10000);
   document.cookie = name + "=v; expires=" + date.toGMTString();
 }