按名称获取cookie

Question

我有一个getter来从cookie中获取值.

现在我有两个名字shares=和名字的饼干obligations=.

我想让这个getter只是为了从义务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]);
    }
 }

Answer 1

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

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

演练

按令牌拆分字符串将生成一个带有一个字符串(相同值)的数组,以防字符串中不存在令牌,或者带有两个字符串的数组,以防在字符串中找到令牌.

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

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

考虑到cookie存储如下:

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

为了检索特定的cookie值,我们只需要获取"; {name} ="之后和之前";"之前的字符串.在我们进行任何处理之前,我们在cookie字符串前加上";",以便每个cookie名称(包括第一个)都包含在";"和"="中:

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

现在,我们可以首先拆分"; {name} =",如果在cookie字符串中找到了令牌(即我们有两个元素),我们最终会得到第二个元素是一个以我们的cookie值开头的字符串.然后我们从一个数组(即pop)中取出它,并重复相同的过程,但现在用";" 作为一个标记,但这次拉出左边的字符串(即移位)以获得实际的标记值.

Answer 2

我更喜欢在cookie上使用单个正则表达式匹配:

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

感谢Scott Jungwirth的评论.

Answer 3

使用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 cookies页面偷了上面的代码.你应该读它.

Answer 4

如果你使用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');

Answer 5

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

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. [^;]* - 匹配除分号以外的零个或多个字符.这意味着它将匹配字符,但不包括分号或字符串的结尾.

Answer 6

这是一个单行代码，无需任何外部库即可获取具有特定名称的 cookie 值：

const value = ('; '+document.cookie).split(`; COOKIE_NAME=`).pop().split(';')[0];

这个答案基于kirlich 的出色解决方案。此解决方案的唯一妥协是，当 cookie 不存在时，您将得到一个空字符串。不过，在大多数情况下，这不应该是一个交易破坏者。

Answer 7

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而不是扫描.可以使用少量的cookie.

Answer 8

一个简单的方法:)

const cookieObj = new URLSearchParams(document.cookie.replaceAll("&", "%26").replaceAll("; ","&"))
cookieObj.get("your-cookie-name")

Answer 9

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

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

如果它返回空字符串,则表示cookie存在但没有值,如果返回false则cookie不存在.我希望这有帮助.

Answer 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的键和值进行编码,请删除decode&encodeURIComponent().

Answer 11

我的一个线性函数通过它的键来获取值 cookie。

cookie = key=>((new RegExp((key || '=')+'=(.*?); ','gm')).exec(document.cookie+'; ') ||['',null])[1]

调用 cookie 函数为

cookie('some-key')

Answer 12

使用 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也会改变.

Answer 13

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

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

Answer 14

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

Answer 15

您可以使用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'

Answer 16

总是运作良好:

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.

Answer 17

这是一个很简短的版本

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

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

Answer 18

使用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] : "";
}

Answer 19

显然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');

Answer 20

Object.fromEntries(document.cookie.split('; ').map(v=>v.split('=').map(decodeURIComponent)))

一个将 cookie 转换为 JavaScript Object 或 Map 的 liner

new Map(document.cookie.split('; ').map(v=>v.split('=').map(decodeURIComponent)))

Answer 21

在我看来，您可以将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;
}

Answer 22

在我的项目中，我使用以下函数按名称访问 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);
}