专栏首页OECOMjs对cookie的操作

js对cookie的操作

cookie是网站为了标识用户身份而存储在用户本地终端上的数据,一般这些数据都会进行加密,以防止数据篡改而造成用户信息泄露。cookie数据始终在同源的http请求中携带,他会在服务器和浏览器之间进行数据交互时进行来回传递。 对cookie不仅浏览器端可以进行操作,服务器端也可以进行操作,在这里只说一下浏览器端对于cookie的存取及删除操作。

添加cookie

在说操作之前,首先需要了解一下cookie是如何存储的,我们随便打开一个网站,在控制台输入document.cookie

我们发现cookie的存储方式是key=value; key=value的形式存储的,这里面全都是在有效期内的cookie。了解了存储方式,我们就可以进行set操作了:

let setCookie=(key, value, days) =>{
    let now = new Date();
    let expires = '';
    let formatValue = '';
    if(days){
       now.setTime(now.getTime() + days * 24 * 60 * 60 * 1000);
        expires = ";expires=" + now;
       }
    if(!key){
       return false
    }
    try{
        formatValue  = JSON.stringify(value);
    }catch(e){
        console.log(e);
        return false;
    }
    document.cookie = key + "=" + formatValue + expires;
}

我们设置的过期时间以天为单位,当你想关闭浏览器时就cookie就直接失效,则可不传入days,当不对cookie设置任何正、负或0时间,也就是说对expire不设置,他就会在浏览会话结束时过期。

获取cookie值

上面已经说过了document中存储cookie的形式了,而且过期的cookie不会出现在document.cookie中,这样我们在获取的时候只需要将其进行格式化即可:

let getCookie=key=> {
    //如果cookie中有数据  才可以获取数据
    if (document.cookie) {
      let cookieInfo = document.cookie;
      //cookie中可能会包含一些 额外的数据,这些数据特点是由   分号和空格间隔的
      //所以 先将 分号和空格  替换掉   替换成  ;
      let arr = cookieInfo.replace(/;\s/g, ';').split(";");
      let item,brr
      for (let i = 0; i < arr.length; i++) {
        item = arr[i].split("=");
        if (item[0] === key) {
          brr = item[1];
          return JSON.parse(brr);//如果找到 我们想要的键,将值转成数组返回
        }
      }
      //如果cookie中 没有我们想获取的键值,直接返回一个空数组
      return [];
    }
    //如果cookie中没有数据,直接返回一个空数组
    return [];
  }

删除cookie

删除cookie最简单的办法就是给cookie的过期时间设置一个过去的时间,让他过期就好:

let removeCookie=key=> {
    setCookie(key, "", -1);
  }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 操作cookie信息

    说道cookie,我们都知道他是存储在浏览器客户端的一种数据存储方式,避免了大量与服务器进行数据交互造成的延迟效果,使页面浏览起来很流畅,但是不建议大量的使用c...

    无邪Z
  • 通过javaScript操作cookie

    在网站建设过程中,用户通过登录页面登录,然后跳转到其他页面,此时服务器需要在其他页面知道是谁的操作,需要提供用户名和密码。这时,就需要用到cookie了,下面我...

    无邪Z
  • nodejs操作cookie

    Cookie 是一些数据, 存储于你电脑上的文本文件中。 当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。 Cook...

    无邪Z
  • Cookie的路径以及Cookie域

    HTML5学堂:在之前的文章《使用cookie实现换肤功能》当中,曾经介绍过关于cookie的用法,也书写了一个简单的demo,在这篇文章当中,主要针对cook...

    HTML5学堂
  • Document.cookie

    JavaEdge
  • 操作cookie信息

    说道cookie,我们都知道他是存储在浏览器客户端的一种数据存储方式,避免了大量与服务器进行数据交互造成的延迟效果,使页面浏览起来很流畅,但是不建议大量的使用c...

    无邪Z
  • cookie注入的三种方法(靶场实例绕过WAF)

    ♦要进行cookie注入,我们首先就要修改cookie,这里就需要使用到Javascript语言了。另外cookie注入的形成有两个必须条件:

    字节脉搏实验室
  • 实用主义:前端cookie介绍及操作封装

    MrTreasure
  • 一文看懂Cookie奥秘

    Cookie是什么?cookies是你访问网站时创建的数据片段文件,通过保存浏览信息,它们使你的在线体验更加轻松。 使用cookies,可以使你保持在线登录状态...

    小码甲
  • HTTP cookies 详解

    HTTP cookies,通常称之为“cookie”,已经存在很长时间了,但是仍然没有被充分理解。首要问题是存在许多误解,认为 cookie 是后门程序或病毒,...

    小小科

扫码关注云+社区

领取腾讯云代金券