按名称获取Cookie


362

我有一个吸气剂来从cookie中获取价值。

现在我有2个饼干,分别是名字shares=和名字obligations=

我只想让这个吸气剂从义务cookie中获取值。

我该怎么做呢?因此,for将数据拆分为单独的值,然后将其放入数组中。

 function getCookie1() {
    // What do I have to add here to look only in the "obligations=" cookie? 
    // Because now it searches all the cookies.

    var elements = document.cookie.split('=');
    var obligations= elements[1].split('%');
    for (var i = 0; i < obligations.length - 1; i++) {
        var tmp = obligations[i].split('$');
        addProduct1(tmp[0], tmp[1], tmp[2], tmp[3]);
    }
 }

您是否有一些树脂而不只是将其制成阵列?
webLacky3rdClass 2012年

使cookie成为我应该说的数组。
webLacky3rdClass'5

不,我该怎么办?


您可能要接受答案:您的问题仍被标记为未回答。
Soleil-MathieuPrévot18年

Answers:


499

一种避免迭代数组的方法是:

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

演练

如果令牌中不存在令牌,则按令牌拆分字符串将生成一个具有一个字符串(相同值)的数组,或者如果在string中找到令牌,则将生成具有两个字符串的数组。

第一个(左)元素是令牌之前的字符串,第二个(右)元素是令牌之后的字符串。

(注意:如果字符串以令牌开头,则第一个元素为空字符串)

考虑到cookie的存储方式如下:

"{name}={value}; {name}={value}; ..."

为了检索特定的cookie值,我们只需要获取在“; {name} =”之后和下一个“;”之前的字符串。在进行任何处理之前,我们在cookie字符串前添加“;”,以便每个cookie名称(包括第一个)都用“;”和“ =“括起来:

"; {name}={value}; {name}={value}; ..."

现在,我们可以先以“; {name} =”进行分割,如果在cookie字符串中找到了令牌(即,我们有两个元素),我们将以第二个元素作为以cookie值开头的字符串结尾。然后我们将其从数组中取出(即pop),并重复相同的过程,但现在使用“;” 作为令牌,但是这次拉出左字符串(即shift)以获取实际令牌值。


13
@ user3132564尝试对其进行编辑,但实际上它是注释:搜索cookie的后缀时,此方法返回错误的值-如果document.cookie的值为“ FirstName = John”并调用getCookie(“ Name ”),即使该名称没有cookie,您也将返回“ John”。如果一个cookie的名称是另一个cookie的后缀,它也将不起作用-如果document.cookie为“ Name = John; LastName = Doe”,则调用split(“ Name =”)会返回一个包含三个字符串的数组,而该方法不会返回getCookie(“ Name”)的正确值。
丹尼斯·贾赫鲁丁

20
关于此答案中实施的警告:如果有多个同名Cookie,则不会返回任何Cookie值。例如,如果为域名.stackexchange.com和programmers.stackexchange.com设置了一个名为stackToken的cookie,则如果您调用getCookie(“ stackToken”),则不会返回任何值-parts.length将大于2。如果您知道所有名称相同的cookie值(但不同的域和路径)将是相同的,请参阅接受的答案在这里:stackoverflow.com/questions/5639346/...
jlpp

7
@DennisJaheruddin-后缀问题似乎已修复。
弥敦道JB

2
@ NathanJ.Brauer你是对的。更新以解决很久以前的问题,但仅在变更日志中进行了注释,而不是在注释中进行了注释。
kirlich 2015年

这是一个错误。如果Cookie的“名称”并在另一个类似名称的下划线,IE 10+也将给出错误。例如:"user""Joe""user_name""Doe"
BOZ

176

我希望在Cookie上使用单个正则表达式匹配项:

window.getCookie = function(name) {
  var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
  if (match) return match[2];
}

或者我们也可以将其用作函数,请检查以下代码。

function check_cookie_name(name) 
    {
      var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
      if (match) {
        console.log(match[2]);
      }
      else{
           console.log('--something went wrong---');
      }
   }

由于评论中的Scott Jungwirth而有所改进。


11
如果两个cookie具有相同的后缀,则可能有错误的匹配项。这将同时匹配xyz=valueabcxyz=valuename = xyz
布伦特·沃什伯恩

3
unescape((document.cookie.match(key + '=([^;].+?)(;|$)') || [])[1] || '');Glize / dom / Cookies的
Valentin Podkamennyi 2015年

19
更新正则表达式以new RegExp('(^| )' + name + '=([^;]+)')避免@BrentWashburne引发的问题。我也为此进行了jsperf测试,并给出了最高的投票答案,该测试结果排名略高,但绝对是更少的代码,更易于遵循:jsperf.com/simple-get-cookie-by-name
Scott Jungwirth

5
@ScottJungwirth是的,但是您必须更新return语句以返回match [2];

@ScottJungwirth为什么不new RegExp('(^|;)' + name + '=([^;]+)')呢?name在行或分号开头的后面,为什么要使用空格``?
junlin '19

89

使用Cookie获取脚本:

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

然后调用它:

var value = readCookie('obligations');

我从quirksmode cookie页面上偷了上面的代码。你应该读它


7
...这从W3schools那里窃取了代码。哇。w3schools.com/js/js_cookies.asp
WillWam '18

嘿,至少我赞扬了您:p还知道您是原始人吗?
mkoryak

通常可以假设W3S放在首位。他们是许多使用ctrl-c代码的新手的住所。
WillWam

实际上,看起来似乎是另一回事:) Quirksmode是/非常适合浏览器怪癖的网站,并且那里也有资料来源。scottandrew.com
sunn0

我爱w3schools。可能是老年人的最佳平台
拉尔夫·丁格斯

56

如果您使用jQuery,建议您使用此插件:

https://github.com/carhartl/jquery-cookie
https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js

<script type="text/javascript"
 src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js">

因此,您可以像这样读取Cookie:

var value = $.cookie("obligations");

您也可以编写cookie:

$.cookie('obligations', 'new_value');
$.cookie('obligations', 'new_value', { expires: 14, path: '/' });

删除Cookie:

$.removeCookie('obligations');

1
不确定为什么还没有被投票为最佳答案。是的,它是jQuery而不是JavaScript,但同时还是!!!
Cozzbie 2014年

21
@Cozzbie可能包括一个外部库(从而添加了另一个http请求)来仅获取cookie值,这是不必要的过大杀伤力。
rahulserver

我在“ $ .cookie”处收到错误消息“ Uncaught ReferenceError:未定义$”。尽管我包括了所有必需的库,例如jquery.min.js,以及此答案中建议的库。
Adarsh Singh

44

其他一些使用正则表达式的答案中的方法并不涵盖所有情况,尤其是:

  1. 当cookie是最后一个cookie时。在这种情况下,Cookie值后将不会有分号。
  2. 当另一个Cookie名称以要查找的名称结尾时。例如,您要查找名为“ one”的cookie,并且有一个名为“ done”的cookie。
  3. 当cookie名称包含在正则表达式中使用时不会被解释为自身的字符时,除非它们前面带有反斜杠。

下面的方法处理这些情况:

function getCookie(name) {
    function escape(s) { return s.replace(/([.*+?\^${}()|\[\]\/\\])/g, '\\$1'); };
    var match = document.cookie.match(RegExp('(?:^|;\\s*)' + escape(name) + '=([^;]*)'));
    return match ? match[1] : null;
}

null如果找不到cookie,将返回该值。如果cookie的值为空,它将返回一个空字符串。

笔记:

  1. 此函数假定cookie名称区分大小写
  2. document.cookie-当它出现在作业的右侧时,它表示一个字符串,其中包含以分号分隔的cookie列表,而cookie则是name=value成对的。每个分号后似乎只有一个空格。
  3. String.prototype.match()- null当找不到匹配项时返回。找到匹配项时返回一个数组,并且index [1]处的元素是第一个匹配组的值。

正则表达式注释:

  1. (?:xxxx) -组成不匹配的组。
  2. ^ -匹配字符串的开头。
  3. | -分隔组的替代模式。
  4. ;\\s* -匹配一个分号,后跟零个或多个空格字符。
  5. = -匹配一个等号。
  6. (xxxx) -组成一个匹配组。
  7. [^;]*-匹配除分号以外的零个或多个字符。这意味着它将匹配最多但不包括分号或字符串末尾的字符。

4
这个答案是最好和最短的函数,在所有情况下都可以有效地避免错误匹配。它也对它如何工作有最好的解释。但是,没有解释转义功能,我认为如果作者创建了cookie,他将知道是否需要转义该名称。因此,我宁愿看到一个较短的函数:function getCookie(name) { var match = document.cookie.match(RegExp('(?:^|;\\s*)' + name + '=([^;]*)')); return match ? match[1] : null; }
Jeff Baker

如果要成为通用工具,则如果该名称不能直接嵌入到正则表达式中,则应转义该名称或抛出错误。知道其应用程序限制的人可以删除逃生装置或防护装置。
乔·拉普

31

4年后,ES6方式更简单了。

function getCookie(name) {
  let cookie = {};
  document.cookie.split(';').forEach(function(el) {
    let [k,v] = el.split('=');
    cookie[k.trim()] = v;
  })
  return cookie[name];
}

我还创建了要点,以将其用作Cookie对象。例如,Cookie.set(name,value)Cookie.get(name)

这将读取所有cookie,而不是进行扫描。少量饼干也可以。


23

我已经修改了乔纳森(Jonathan)在此处提供的功能,通过使用正则表达式,您可以通过其名称获取cookie值,如下所示:

function getCookie(name){
    var pattern = RegExp(name + "=.[^;]*")
    var matched = document.cookie.match(pattern)
    if(matched){
        var cookie = matched[0].split('=')
        return cookie[1]
    }
    return false
}

如果返回空字符串,则表示该cookie存在但不具有值;如果返回false,则该cookie不存在。我希望这有帮助。


只是好奇,为什么不在var第3行上使用?matched = ...
维克托里奥·贝拉

抱歉,忘记写了。
Mohyaddin Alaoddin

14

这是一种无需特定外部lib即可获得具有特定名称的cookie的方法:

var cookie = ("; "+document.cookie).split("; YOUR_COOKIE_NAME=").pop().split(";").shift();

这个答案是基于基里希的出色解决方案。此解决方案的唯一折衷之处是,当cookie不存在时,您将得到一个空字符串。不过,在大多数情况下,这不应该成为破坏交易的因素。


10

我知道这是一个老问题,但我也遇到了这个问题。仅作记录,开发人员mozilla网页中有一些API 。

Yoy仅使用JS即可按名称获取任何cookie。该代码也更清晰,恕我直言(长行除外,我相信您可以轻松修复)。

function getCookie(sKey) {
    if (!sKey) { return null; }
    return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
}

如评论中所述,请注意,此方法假定键和值是使用encodeURIComponent()编码的。如果未对Cookie的键和值进行编码,则删除解码和encodeURIComponent()。


1
请注意,该方法假定cookie的名称和值都是在encodeURIComponent()设置cookie时使用的,这是正确的,如果您使用伴随函数设置cookie,则可能会如此,但并非总是如此。测试
John S

@JohnS不过,我们可以删除decodeURIComponent,对吧?(如果我们不使用它来设置cookie?)它仍然可以工作吗?
NiCk Newman

是的,只是删除了decodeURI,这个正则表达式是一个怪物。谢谢马克,投票!
NiCk Newman

10

您可以使用js-cookie库获取和设置JavaScript cookie。

包含到您的HTML中:

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

要创建Cookie:

Cookies.set('name', 'value');

读取Cookie:

Cookies.get('name'); // => 'value'

8

这是一个很简短的版本

 function getCookie(n) {
    let a = `; ${document.cookie}`.match(`;\\s*${n}=([^;]+)`);
    return a ? a[1] : '';
}

请注意,我利用了ES6的模板字符串来组成正则表达式。


2
从现在开始最好的答案。使用ES6功能。是2017年,人们仍在使用var+连接等。
Elias Soares

@EliasSoares使用有什么问题var
mrReiha


没问题,但是使用let是一个好习惯,因为它在很多情况下都有优点,而几乎没有缺点
Elias Soares

7

采用 object.defineProperty

这样,您可以轻松访问cookie

Object.defineProperty(window, "Cookies", {
    get: function() {
        return document.cookie.split(';').reduce(function(cookies, cookie) {
            cookies[cookie.split("=")[0]] = unescape(cookie.split("=")[1]);
            return cookies
        }, {});
    }
});

从现在开始,您可以执行以下操作:

alert( Cookies.obligations );

这也会自动更新,因此,如果您更改cookie,它Cookies也会更改。


2
完善!除了它不适用于带有破折号(作为cookie名称)之类的字符的对象,并且在拆分时,对象首先具有空格,所以我去了cookies[(cookie.split("=")[0]).replace(/ /g,'')] = ..。谢谢!!
塞缪尔·埃尔

@Samuel Elh正确,但您也可以使用.trim()代替replace(/ / g,'')
mtizziani

7

基里希给出了一个很好的解决方案。但是,当有两个具有相似名称的cookie值时,它将失败,这是针对这种情况的简单修复:

function getCookie(name) {
  var value = "; " + document.cookie;
  var parts = value.split("; " + name + "=");
  if (parts.length >= 2) return parts.pop().split(";").shift();
}

6

总是很好:

function getCookie(cname) {
    var name = cname + "=",
        ca = document.cookie.split(';'),
        i,
        c,
        ca_length = ca.length;
    for (i = 0; i < ca_length; i += 1) {
        c = ca[i];
        while (c.charAt(0) === ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) !== -1) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function setCookie(variable, value, expires_seconds) {
    var d = new Date();
    d = new Date(d.getTime() + 1000 * expires_seconds);
    document.cookie = variable + '=' + value + '; expires=' + d.toGMTString() + ';';
}

不需要jQuery或其他任何东西。纯旧的好JavaScript。


6
function getCookie(name) {
    var pair = document.cookie.split('; ').find(x => x.startsWith(name+'='));
    if (pair)
       return pair.split('=')[1]
}

6

使用Cookie名称获取Cookie的简单功能:

function getCookie(cn) {
    var name = cn+"=";
    var allCookie = decodeURIComponent(document.cookie).split(';');
    var cval = [];
    for(var i=0; i < allCookie.length; i++) {
        if (allCookie[i].trim().indexOf(name) == 0) {
            cval = allCookie[i].trim().split("=");
        }   
    }
    return (cval.length > 0) ? cval[1] : "";
}

6

显然MDN从未听说过单词边界的regex字符类\b,该类与\w+在左右两边有界的连续匹配\W+

getCookie = function(name) {
    var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
    return r ? r[1] : null;
};

var obligations = getCookie('obligations');

5

在我看来,您可以将Cookie键值对拆分为一个数组,然后基于该数组进行搜索:

var obligations = getCookieData("obligations");

运行以下命令:

function getCookieData( name ) {
    var pairs = document.cookie.split("; "),
        count = pairs.length, parts; 
    while ( count-- ) {
        parts = pairs[count].split("=");
        if ( parts[0] === name )
            return parts[1];
    }
    return false;
}

小提琴:http//jsfiddle.net/qFmPc/

甚至可能是以下情况:

function getCookieData( name ) {
    var patrn = new RegExp( "^" + name + "=(.*?);" ),
        patr2 = new RegExp( " " + name + "=(.*?);" );
    if ( match = (document.cookie.match(patrn) || document.cookie.match(patr2)) )
        return match[1];
    return false;
}

1
有没有一种方法可以使用document.cookie.indexOf(name)进行比较?

@AndrejHefner您可以,尽管可以匹配子字符串。因此,如果您有一个cookie名称“ foobar”和一个名为“ bar”的cookie,则可能会使“ foobar”中的“ bar”与键“ bar”混淆。
桑普森

@AndrejHefner请参阅后面的方法,该方法应该更快,因为它会检查字符串是否匹配。
桑普森

1
第二种方法有一个错误,因为它总是寻找一个,所以找不到最后一个cookie值。在最后。更正的版本是:function getCookieData( name ) { var patrn = new RegExp( "(?:^| )" + name + "=(.*?)(?:;|$)" ); if ( match = (document.cookie.match(patrn) )) return match[1]; return false; }
Oz Solomon

5

在我的项目中,我使用以下功能按名称访问Cookie

function getCookie(cookie) {
    return document.cookie.split(';').reduce(function(prev, c) {
        var arr = c.split('=');
        return (arr[0].trim() === cookie) ? arr[1] : prev;
    }, undefined);
}

4

如果您只需要检查是否存在某些Cookie,则只需执行以下操作:

document.cookie.split('logged=true').length == 2

如果cookie logging = true存在,那么您将得到2,如果不是1。

logging = true-将其更改为您的cookie name = value,或者只是一个名称


1
改为使用它更具可读性.indexOf() >= 0吗?
Vic Seedoubleyew19年

3

获取Cookie的答案已经很不错了,但是这是我自己的解决方案:

function getcookie(cookiename){
var cookiestring  = document.cookie;
var cookiearray = cookiestring.split(';');
for(var i =0 ; i < cookiearray.length ; ++i){ 
    if(cookiearray[i].trim().match('^'+cookiename+'=')){ 
        return cookiearray[i].replace(`${cookiename}=`,'').trim();
    }
} return null;
}

用法:

     getcookie('session_id');
   // gets cookie with name session_id



2

我的解决方案是这样的:

function getCookieValue(cookieName) {
    var ca = document.cookie.split('; ');
    return _.find(ca, function (cookie) {
        return cookie.indexOf(cookieName) === 0;
    });
}

此函数使用Underscorejs _.find函数。如果cookie名称不存在,则返回undefined


2

我是这样做的。这样我就可以访问一个对象以分隔值

var cookies=getCookieVal(mycookie);
alert(cookies.mykey);
function getCookieVal(parent) {
            var cookievalue = $.cookie(parent).split('&');
            var obj = {};
            $.each(cookievalue, function (i, v) {
                var key = v.substr(0, v.indexOf("="));
                var val = v.substr(v.indexOf("=") + 1, v.length);

                obj[key] = val;

            });
            return obj;
        }  

1

查找现有cookie的功能方法。它返回一个数组,因此它支持多次出现相同的名称。它不支持部分键匹配,但是用正则表达式替换过滤器中的===很简单。

function getCookie(needle) {
    return document.cookie.split(';').map(function(cookiestring) {
        cs = cookiestring.trim().split('=');

        if(cs.length === 2) {
            return {'name' : cs[0], 'value' : cs[1]};
        } else {
            return {'name' : '', 'value' : ''};
        }
    })
    .filter(function(cookieObject) { 
        return (cookieObject.name === needle);
    });
}

1

只需使用以下功能(纯JavaScript代码)

const getCookie = (name) => {
 const cookies = Object.assign({}, ...document.cookie.split('; ').map(cookie => {
    const name = cookie.split('=')[0];
    const value = cookie.split('=')[1];

    return {[name]: value};
  }));

  return cookies[name];
};

1

通过名称获取cookie只需将cookie的名称传递给以下函数

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i <ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

0

接下来的函数将返回一key-value对所需的cookie,其中keycookie名称为cookie value的值。

/**
 * Returns cookie key-value pair
 */
var getCookieByName = function(name) {
    var result = ['-1','-1'];
    if(name) {
        var cookieList = document.cookie.split(';');
        result = $.grep(cookieList,function(cookie) { 
            cookie = cookie.split('=')[0];
            return cookie == name;
        });
    }
    return result;
};

0

Cookies示例: JS 示例

document.cookies = {
   create : function(key, value, time){
     if (time) {
         var date = new Date();
         date.setTime(date.getTime()+(time*24*60*60*1000));
         var expires = "; expires="+date.toGMTString();
     }
     else var expires = "";
     document.cookie = key+"="+value+expires+"; path=/";
   },
   erase : function(key){
     this.create(key,"",-1);
   },
   read : function(key){
     var keyX = key + "=";
     var ca = document.cookie.split(';');
     for(var i=0;i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
          if (c.indexOf(keyX) == 0) return   c.substring(keyX.length,c.length);
     }
     return null;
   }
}

使用json或xml存储数组和对象

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.