javascript - 名前でCookieを取得する

Question

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

shares=これで、名前と名前で2つのCookieができました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]);
    }
 }

score 604 · Accepted Answer

配列の繰り返しを回避する 1 つのアプローチは、次のようになります。

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

ウォークスルー

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

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

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

クッキーが次のように保存されていることを考慮してください。

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

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

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

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

score 63 · Accepted Answer

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

score 61 · Accepted Answer

正規表現を使用する他の回答のいくつかの方法は、すべてのケースをカバーしているわけではありません。特に:

Cookie が最後の Cookie である場合。この場合、Cookie 値の後にセミコロンはありません。
別の Cookie 名が検索中の名前で終わる場合。たとえば、「one」という名前の Cookie を探していて、「done」という名前の Cookie があるとします。
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 の値が空の場合、空の文字列が返されます。

ノート：

この関数は、Cookie 名の大文字と小文字が区別されることを前提としています。
document.cookie- これが割り当ての右側に表示される場合、セミコロンで区切られた Cookie のリストを含む文字列を表します。これらはname=valueペアになります。各セミコロンの後に単一のスペースがあるように見えます。
String.prototype.match()null-一致が見つからない場合は戻ります。一致が見つかった場合は配列を返します。index の要素[1]は、最初に一致したグループの値です。

正規表現に関する注意:

(?:xxxx)- 一致しないグループを形成します。
^- 文字列の先頭に一致します。
|- グループの代替パターンを分離します。
;\\s*- ゼロ個以上の空白文字が続く 1 つのセミコロンに一致します。
=- 1 つの等号に一致します。
(xxxx)- 一致するグループを形成します。
[^;]*- セミコロン以外の 0 個以上の文字に一致します。これは、セミコロンまで、または文字列の末尾までの文字と一致することを意味します。

score 25 · Accepted Answer

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 が存在しないことを意味します。これが役立つことを願っています。

score 12 · Accepted Answer

私はそれが古い質問であることを知っていますが、私もこの問題に遭遇しました。記録のために、開発者の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() を削除します。

score 10 · Accepted Answer

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

score 7 · Accepted Answer

使用する`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ます。

score 7 · Accepted Answer

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

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

score 6 · Accepted Answer

常にうまく機能します：

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 です。

score 6 · Accepted Answer

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

score 3 · Accepted Answer

JavaScriptで設定

document.cookie = 'cookiename=tesing';

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

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

alert(value);

score 2 · Accepted Answer

私はこのようにしました。値を分離するためにアクセスするオブジェクトを取得します。これにより、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;
        }

score 0 · Accepted Answer

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

/**
 * 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;
};

score 0 · Accepted Answer

名前で Cookie 値を取得するためにクロージャーを使用するのが好きです。以下のクロージャーは、名前で Cookie 値を取得できるようにしますが、Cookie 文字列が更新されている場合にのみ解析します。

次の方法で Cookie の値を取得できます。

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

score 0 · Accepted Answer

const cookies = 'key1=chocolate; key2=iceCream; key3=cookies;';

// convert string into array with split
const arrCookies = cookies.split('; '); // [ 'key1=chocolate', 'key2=iceCream', 'key3=cookies' ]

// split key value by equal sign
const arrArrCookiesKeyValue = arrCookies.map(cookie => [cookie.split('=')]);  // [[['key1', 'chocolate']], ...']

// make an object with key value
const objectKeyValueCookies = {}; // { key1: 'chocolate', key2: 'iceCream', key3: 'cookies;' }
for (let arr of arrArrCookiesKeyValue) {
    objectKeyValueCookies[arr[0][0]] = arr[0][1];
}

// find the key in object
const findValueByKey = (key = null, objectCookies) => objectCookies[key];
console.log(findValueByKey('key2', objectKeyValueCookies)); // chocolate

score 0 · Accepted Answer

この応答に「公式」の回答を追加するためだけに、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」のみを「義務」に置き換えたことに注意してください。

javascript - 名前でCookieを取得する

43 に答える 43

使用するobject.defineProperty

Related

Reference

使用する`object.defineProperty`