名前でクッキーを取得する


362

私はクッキーから値を取得するゲッターを持っています。

今私は名前shares=と名前で2つのクッキーを持っています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年

クッキーを私が言うべき配列にする。
webLacky3rdClass、2012年

いいえ、どうすればできますか?


回答を受け入れることもできます。質問には未回答のタグが付けられています。
ソレイユ-MathieuPrévot2018年

回答:


499

配列の反復を回避する1つのアプローチは次のとおりです。

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

ウォークスルー

トークンによって文字列を分割すると、tokenが文字列に存在しない場合は1つの文字列(同じ値)の配列、tokenが文字列にある場合は2つの文字列の配列が生成されます。

最初の(左)要素はトークンの前の文字列であり、2番目の要素(右)はトークンの後の文字列です。

(注:文字列がトークンで始まる場合、最初の要素は空の文字列です)

Cookieは次のように保存されることを考慮してください。

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

特定のCookie値を取得するには、 "; {name} ="の後で次の ";"の前の文字列を取得する必要があります。処理を行う前に、cookie文字列の先頭に「;」を付けることで、最初の名前を含むすべてのcookie名が「;」と「=」で囲まれるようにします。

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

これで、最初に "; {name} ="で分割できます。トークンがcookie文字列で見つかった場合(つまり、2つの要素がある場合)、2番目の要素はcookie値で始まる文字列になります。次に、それを配列(つまりpop)から取り出し、同じプロセスを繰り返しますが、今は ";"を使用しています。トークンとして、今度は実際のトークン値を取得するために左の文字列(つまりシフト)を引き出します。


13
@ user3132564はこれを編集しようとしましたが、実際にはコメントです:このメソッドは、cookieのサフィックスを検索すると誤った値を返します-document.cookieの値が "FirstName = John"で、getCookie( "Name ")、その名前のCookieがなくても" John "が返されます。あるCookieの名前が別のCookieのサフィックスである場合も機能しません-document.cookieが "Name = John; LastName = Doe"の場合、split( "Name =")を呼び出すと3つの文字列を含む配列が返され、メソッドはt getCookie( "Name")の正しい値を返します。
Dennis Jaheruddin 2013

20
この回答の実装に関する警告:同じ名前のCookieが複数ある場合、Cookie値は返されません。たとえば、ドメイン.stackexchange.comとプログラマー.stackexchange.comに設定されたstackTokenという名前のCookieがある場合、getCookie( "stackToken")を呼び出してもどちらの値も返されません。parts.lengthは2より大きくなります。同じ名前(ただし、異なるドメインおよびパス)のために、すべてのクッキーの値が同じになります知っている場合は、ここでは受け入れ答えを参照してください。stackoverflow.com/questions/5639346/...
jlpp

7
@DennisJaheruddin-サフィックスの問題が修正されたようです。
Nathan 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
2つのCookieのサフィックスが同じである場合、これは誤って一致する可能性があります。それは、両方xyz=valueabcxyz=valueいつ一致しname = xyzます。
ブレントウォッシュバーン

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

19
Regexを更新しnew RegExp('(^| )' + name + '=([^;]+)')て、@ BrentWashburneによって引き起こされる問題を回避します。また、私はこれに対してjsperfテストを行い、最高の投票数で答えを出しました。これはわずかに上位に表示されますが、コードが少なく、簡単に追跡できます。jsperf.com
Scott Jungwirth

5
@ScottJungwirthはい、ただし、returnステートメントを更新してmatch [2]を返す必要があります。
ジョー

@ScottJungwirthどうしてnew RegExp('(^|;)' + name + '=([^;]+)')name行またはセミコロンの開始の後ろ、なぜスペース ``?
junlin

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 2018

ねえ、少なくとも私は信用を与えました:pまた、どれがオリジナルであったかをどうやって知っていますか?
mkoryak

W3Sが最初にW3Sを最初に置くと想定しても、通常は安全です。彼らはctrl-cでコードを書く多くの初心者の家です。
WillWam

実際、それは逆のように見えます:) Quirksmode is /はブラウザの癖のための素晴らしいサイトであり、そこにもソースがあります。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('obligations', 'new_value');
$.cookie('obligations', 'new_value', { expires: 14, path: '/' });

クッキーを削除:

$.removeCookie('obligations');

1
なぜこれが本当にベストアンサーに選ばれていないのかわからない。はい、jQueryであり、JavaScriptではありませんが、同時にITです!!!!
Cozzbie 2014年

21
@Cozzbieは、おそらく外部ライブラリを含めて(それによって別のhttpリクエストを追加して)、単にCookie値をフェッチするだけで、不必要なやりすぎのようなものです。
rahulserver

「$ .cookie」で「Uncaught ReferenceError:$ is not defined」というエラーが発生します。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一致が見つからない場合に戻ります。一致が見つかったときに配列を返します。インデックスの要素[1]は、最初に一致したグループの値です。

正規表現のメモ:

  1. (?:xxxx) -一致しないグループを形成します。
  2. ^ -文字列の先頭に一致します。
  3. | -グループの代替パターンを分離します。
  4. ;\\s* -1つのセミコロンの後に0個以上の空白文字が続くものと一致します。
  5. = -1つの等号に一致します。
  6. (xxxx) -一致するグループを形成します。
  7. [^;]*-セミコロン以外の0個以上の文字に一致します。つまり、セミコロンまで、または文字列の最後までの文字に一致します。

4
この答えは、すべてのケースで誤って一致することなく機能する最良かつ最短の関数です。また、それがどのように機能するかを最もよく説明しています。ただし、エスケープ機能については説明していません。作成者がCookieを作成した場合、名前をエスケープする必要があるかどうかはわかると思います。:かなり短いの機能を見ることが私はそうfunction getCookie(name) { var match = document.cookie.match(RegExp('(?:^|;\\s*)' + name + '=([^;]*)')); return match ? match[1] : null; }
ジェフ・ベイカー

汎用的なツールである場合は、名前をエスケープするか、名前を正規表現に直接埋め込めない場合はエラーをスローする必要があります。アプリケーションの制約を知っている人は、エスケープまたはガードを削除できます。
Joe Lapp、2016

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を読み取ります。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は存在しません。これがお役に立てば幸いです。


気になるだけですが、なぜvar3行目で使用しなかったのですか?matched = ...
ビクトリオベラ

申し訳ありませんが、書き忘れていました。
Mohyaddin Alaoddin

14

以下は、外部ライブラリを必要とせずに特定の名前のCookieを取得するための1つのライナーです。

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

この回答は、カーリッヒの素晴らしいソリューションに基づいています。このソリューションの唯一の妥協点は、Cookieが存在しない場合に空の文字列を取得することです。ただし、ほとんどの場合、これは取引ブレーカーではありません。


10

私はそれが古い質問であることを知っていますが、私もこの問題に出くわしました。参考までに、開発者のMozilla Webページには小さな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()を削除します。


1
メソッドは、CookieのencodeURIComponent()設定時にCookieの名前と値の両方がエンコードされていると想定していることに注意してください。これは、コンパニオン関数を使用してCookieを設定した場合はtrueになりますが、常にそうであるとは限りません。テスト
John S

@JohnSでも、decodeURIComponentを削除することはできますよね?(Cookieの設定に使用しなかった場合は?)引き続き機能しますか?
NiCkニューマン2015

はい、decodeURIを削除しました。この正規表現はモンスターです。マークありがとう、投票!
NiCkニューマン2015

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

クッキーを読むには:

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

8

これはかなり短いバージョンです

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

ES6のテンプレート文字列を使用して正規表現を作成したことに注意してください。


2
今からのベストアンサー。ES6機能を使用します。それは2017年だと人々はまだ使用してvar+「-.-など、CONCATENATEに
エリアス・ソアレス

@EliasSoares使用の問題は何varですか?
mrReiha


問題ではありませんが、letを使用することは、多くの状況でメリットがあり、デメリットがほとんどないため、良い方法です
エリアスソアレス

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を変更すると、Cookie Cookiesも変更されます。


2
パーフェクト!ダッシュなどの一部の文字が含まれるオブジェクト(Cookie名として)では機能しません。また、分割するとき、オブジェクトには最初に空白スペースがあるため、次に進みcookies[(cookie.split("=")[0]).replace(/ /g,'')] = ..ます。ありがとう!!
Samuel Elh 16

@Samuel Elh正解ですが、replace(/ / g、 '')の代わりに.trim()を使用することもできます
mtizziani

7

キルリッヒは良い解決策を与えた。ただし、類似した名前のCookie値が2つある場合は失敗します。この状況に対する簡単な修正を次に示します。

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は、ワード境界正規表現の文字クラスのことを聞いたことがない\bの連続一致した、\w+とのいずれかの側に制限されています\W+

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

var obligations = getCookie('obligations');

5

私はあなたがクッキーのキーと値のペアを配列に分割し、それに基づいて検索を行うことができるようです:

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可能ですが、部分文字列と一致します。したがって、「foobar」という名前のクッキーと「bar」という名前のクッキーがある場合、「foobar」の「bar」をキー「bar」と混同する可能性があります。
サンプソン2012年

@AndrejHefner文字列の一致をチェックするため、より高速であるはずの後者のメソッドを参照してください。
サンプソン2012年

1
2番目の方法には、常にを探すため、最後のCookie値が見つからないというバグがあります。最後に。修正版は次のようになりますfunction getCookieData( name ) { var patrn = new RegExp( "(?:^| )" + name + "=(.*?)(?:;|$)" ); if ( match = (document.cookie.match(patrn) )) return match[1]; return false; }
オズソロモン

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

cookielogged = trueが存在する場合、1でない場合は2を取得します。

logs = true-これをcookieのname = value、または単に名前に変更します


1
.indexOf() >= 0代わりに使用する方が読みやすいでしょうか?
Vic Seedoubleyew

3

クッキーを取得するための良い答えはすでにここにありますが、ここに私自身の解決策があります:

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

3

JavaScriptで設定

document.cookie = 'cookiename=tesing';

jquery-cookieプラグインを使用してjqueryで取得する

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

alert(value);

@cytsunny-これを使用するには、jquery cookieプラグインが必要です。
Alex Standiford、2018年

うわー..以前に重要な情報が欠けていたもの....しかし、あなたが提供したリンクから、ライブラリの所有者がjqueryの依存関係を削除するほうがよいと判断したようです。
cytsunny 2018年


2

私の解決策はこれです:

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

この関数は、Underscorejs _.find関数を使用します。Cookie名が存在しない場合はundefinedを返します


2

私はこのようにしてやった。これにより、値を分離するためにアクセスするオブジェクトを取得できます。これにより、Cookieを親に渡し、次のようなキーで値にアクセスできます。

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のペアを返します。ここkeyで、はCookie名であり、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

Cookieの例: 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を使用して配列とオブジェクトを保存する

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.