web-dev-qa-db-ja.com

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

クッキーから値を取得するためのゲッターがあります。

今私はshares=という名前とobligations=という名前の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]);
    }
 }
297
user1395001

配列を反復処理しないようにする1つの方法は、次のとおりです。

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

チュートリアル

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

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

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

Cookieが次のように格納されていることを考慮してください。

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

特定のクッキーの値を取得するには、 "; {name} ="の後で次の ";"の前の文字列を取得するだけです。処理を行う前に、最初のものも含めてすべてのCookie名が ";"と "="で囲まれるように、Cookie文字列の先頭に ";"を付けます。

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

さて、最初に "; {name} ="で分割することができ、tokenがクッキー文字列内に見つかった場合(つまり2つの要素がある場合)、2番目の要素はクッキー値で始まる文字列になります。それからそれを配列から取り出し(ポップ)、同じプロセスを繰り返しますが、今度は ";"を付けます。トークンとして。ただし、今回は実際のトークン値を取得するために左の文字列を取り出す(すなわちshift)。

421
kirlich

私はクッキーに単一の正規表現の一致を使うことを好むでしょう:

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に感謝します。

136

クッキー取得スクリプトを使用します。

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クッキーのページから上記のコードを盗みました。 あなたはそれを読むべきです

76
mkoryak

あなたが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">

だからあなたはこのようなクッキーを読むことができます:

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

また、あなたはクッキーを書くことができます:

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

クッキーを削除します。

$.removeCookie('obligations');
50
trante

他のいくつかの答えの中で正規表現を使う方法は、すべての場合を網羅しているわけではありません。特に、

  1. クッキーが最後のクッキーの場合この場合、cookie値の後にセミコロンは付きません。
  2. 別のCookie名が検索対象の名前で終わったとき。たとえば、 "one"という名前のクッキーを探していて、 "done"という名前のクッキーがあるとします。
  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の値が空の場合は空の文字列を返します。

ノート:

  1. この関数は クッキー名が大文字と小文字を区別すると仮定します .
  2. document.cookie - これが代入の右側に現れると、セミコロンで区切られたクッキーのリストを含む文字列を表します。これはname=valueのペアです。各セミコロンの後には単一のスペースがあるようです。
  3. String.prototype.match() - 一致が見つからない場合はnullを返します。一致が見つかったときに配列を返し、インデックス[1]の要素は最初に一致したグループの値です。

正規表現に関する注意事項

  1. (?:xxxx) - 一致しないグループを形成します。
  2. ^ - 文字列の先頭に一致します。
  3. | - グループの代替パターンを区切ります。
  4. ;\\s* - 1つのセミコロンの後に0個以上の空白文字が続くものと一致します。
  5. = - 1つの等号に一致します。
  6. (xxxx) - マッチンググループを形成します。
  7. [^;]* - セミコロン以外の0個以上の文字と一致します。つまり、セミコロンまで、または文字列の末尾までの文字と一致しますが、それらには一致しません。
38
John S

私はJonathanがここで提供していた機能を修正しました、正規表現を使うことによってあなたはこのような名前でクッキー値を得ることができます:

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

空の文字列を返した場合、クッキーは存在するが値がないことを意味し、falseを返した場合、クッキーは存在しません。これが役に立つことを願っています。

17

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オブジェクトとして使うために Gist を作成しました。例:Cookie.set(name,value)Cookie.get(name)

スキャンするのではなく、すべてのクッキーを読み取ります。少数のクッキーでも大丈夫です。

17
allenhwkim

私はそれが古い質問であることを知っていますが、私もこの問題に出くわしました。記録のためだけに、開発者には少しAPIがあります mozilla Webページ

あなたはJSだけを使って名前でどんなクッキーも手に入れることができます。コードもきれいな私見です(長い行を除いて、私はあなたが簡単に修正できると確信しています)。

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()を削除してください。

9
Marc

object.definePropertyを使う

これで、あなたは簡単にクッキーにアクセスすることができます

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

これも自動的に更新されますので、クッキーを変更すると、Cookiesname__も変更されます。

7
Downgoat

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
Saddam H

kirlich は良い解決策を出した。しかし、類似した名前を持つ2つのcookie値があると失敗します。この状況を簡単に修正する方法は次のとおりです。

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

いつもうまくいく:

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
Lukas

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

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

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

4
mayor

私のプロジェクトでは、私は以下の機能を使って名前でクッキーにアクセスしています

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
Eugene Burtsev

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

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;
}
4
Sampson

JavaScriptクッキーを取得および設定するには js-cookie libraryを使用できます。

HTMLに含める:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/js.cookie.min.js"></script>

クッキーを作成するには:

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

クッキーを読むには:

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

javaScriptで設定

document.cookie = 'cookiename=tesing';

jquery-cookieプラグインを使ってjqueryで取得

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

alert(value);
3
Bhale Dino

ここにクッキーを入手するための良い答えが既にあります、しかしここに私自身の解決策があります:

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
Mazino S Ukah

参照: https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

document.cookie = "test1=Hello";
document.cookie = "test2=World";

var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");

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

どうやらMDNは\bで両側に境界がある隣接する\w+と一致するWord境界正規表現文字クラス\W+を聞いたことがないようです。

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

var obligations = getCookie('obligations');
3
cowbert

私の解決策はこれです:

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

この関数はUnderscorejs _.find関数を使います。クッキー名が存在しない場合はundefinedを返します

2
atlefren

私はこのようにしました。私は値を分離するためにアクセスするためのオブジェクトを取得するように。これであなたは親にクッキーを渡すことができますそしてあなたは次のようなキーであなたの値にアクセスすることができます

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;
        }  
2
saydur rahman

クッキーが存在するかどうかを確認するだけでよい場合は、次の手順を実行します。

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

cookie logging = trueが存在する場合は2、そうでない場合は2が返されます。

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

1
RTW

既存のクッキーを見つけるための機能的アプローチ配列を返すので、同じ名前の複数回の出現をサポートします。部分的なキーマッチングはサポートされていませんが、フィルタ内の===を正規表現に置き換えるのは簡単です。

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
79man

次の関数は、必要なcookieのkey-valueペアを返します。ここで、keyはcookie名、valueはcookieの値です。

/**
 * 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
Suhail Gupta

この回答に「公式」の回答を追加するために、 _ mdn _ からCookieを設定および取得するためのソリューションをコピー/貼り付けしています( JSfiddle

    document.cookie = "test1=Hello";
    document.cookie = "test2=World";

    var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");

    function alertCookieValue() {
      alert(cookieValue);
    }

あなたの特定のケースでは、あなたは次の関数を使うでしょう

    function getCookieValue() {
      return document.cookie.replace(/(?:(?:^|.*;\s*)obligations\s*\=\s*([^;]*).*$)|^.*$/, "$1");
    }

私は例から "test2"を "obligations"に置き換えただけであることに注意してください。

0
Erenor Paz

クッキーの値を名前で取得するためにクロージャを使うのが好きです。下記のクロージャーはあなたが名前によってクッキー値を得ることを可能にするでしょう、しかしそれが更新されている場合にのみクッキーストリングを解析するでしょう。

次のようにしてクッキーの値を取得できます。

var foo = cookies.get( "bar" );

コード:

var cookies = ( function() {
    var cookieString = null;
    var cookieArray = [];

    function getValOf( name ) {
        if ( newCookies() ) {
            parseCookieString()
        }
        return cookieArray[ name ];
    }

    // Check if new cookies have been added
    function newCookies() {
        return cookieString === document.cookie;
    }

    function parseCookieString() {
        cookieString = document.cookie;

        // Separate cookies
        var cookies = cookieString.split( ";" );

        // Empty previous cookies
        cookieArray = [];

        // Update cookieArray with new name-value pairs
        for ( var i in cookies ) {

            // Separate name and value
            var nameVal = cookies[ i ].split( "=" );
            var name = nameVal[ 0 ].trim();
            var value = nameVal[ 1 ].trim();

            // Add cookie name value pair to dictionary
            cookieArray[ name ] = value;
        }
    }

    return {

        /**
         * Returns value or undefined
         */
        get: function( name ) {
            return getValOf( name );
        }  
    };
})();
0
Dayton Bobbitt

私はこのようなことをするだろう:

function getCookie(cookie){
  return cookie
    .trim()
    .split(';')
    .map(function(line){return line.split(',');})
    .reduce(function(props,line) {
      var name = line[0].slice(0,line[0].search('='));
      var value = line[0].slice(line[0].search('='));
      props[name] = value;
      return props;
    },{})
}

これはあなたのクッキーをオブジェクトとして返します。

そしてそれを次のように呼ぶことができます。

getCookie(document.cookie)['shares']
0
Julian Tellez

これで、Cookieを配列形式で格納したときにCookieを配列として返すことができます。例えば、あなたのクッキーはarray [35] =Khóaです。 array [36] =Tử; array [37] =Cửa;そして、このコードもutf8です。その中にあなたのクッキー名content []とあなたがクッキーを保存しているとき、一つのことはうまくいかない。

function getCookie(cname) {

            var ca = decodeURIComponent(document.cookie).split(';');


            if (cname.indexOf('[]') > 0) {
                var returnVAlue = [];
                var nameArray = cname.replace("[]", "");

                for(var i = 0; i < ca.length; i++) {
                    var c = ca[i];
                   // console.log(c);
                    while (c.charAt(0) == ' ') {
                        c = c.substring(1);
                    }

                    if (c.indexOf(nameArray) >= 0) {
                        var valueString = c.substr(nameArray.length, c.length);

                        var valueStringSlit = valueString.split('=');
                        valueStringSlit[0] = valueStringSlit[0].substr(1,(valueStringSlit[0].length - 2));
                    //    console.log(valueStringSlit);

                        returnVAlue.Push(valueStringSlit);
                    }
                }
            } else {
                var returnVAlue = '';
                var name = cname + "=";

                for(var i = 0; i < ca.length; i++) {
                    var c = ca[i];
                   // console.log(c);
                    while (c.charAt(0) == ' ') {
                        c = c.substring(1);
                    }
                    if (c.indexOf(name) == 0) {
                        returnVAlue = c.substr(name.length, c.length);
                    } 
                }
            }


            if (returnVAlue != ''){
                return returnVAlue;
            } 
            return "";
        }

       // console.log(decodeURIComponent(document.cookie));


        console.log(getCookie('array[]'));
0
Võ Minh

クッキーの例: example 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で保存する

0
Kelk