Programing

이름으로 쿠키 받기

lottogame 2020. 3. 6. 08:17
반응형

이름으로 쿠키 받기


쿠키에서 가치를 얻는 게 터가 있습니다.

이제 이름 shares=이름으로 2 개의 쿠키가 obligations=있습니다.

이 게터가 의무 쿠키에서 값을 가져 오도록 만들고 싶습니다.

어떻게해야합니까? 따라서 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]);
    }
 }

배열을 반복하지 않는 한 가지 방법은 다음과 같습니다.

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

연습

토큰으로 문자열을 나누면 토큰이 문자열에없는 경우 하나의 문자열이있는 배열 (동일한 값) 또는 토큰이 문자열에있는 경우 두 개의 문자열이있는 배열이 생성됩니다.

첫 번째 (왼쪽) 요소는 토큰 이전의 문자열이고 두 번째 (오른쪽) 요소는 토큰 다음의 문자열입니다.

(참고 : 문자열이 토큰으로 시작하는 경우 첫 번째 요소는 빈 문자열입니다)

쿠키가 다음과 같이 저장되는 것을 고려하십시오.

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

특정 쿠키 값을 검색하려면 "; {name} ="뒤 및 다음 ";"앞의 문자열을 가져와야합니다. 처리하기 전에 쿠키 문자열 앞에 ";"를 붙여 첫 번째 쿠키를 포함한 모든 쿠키 이름이 ";"및 "="로 묶습니다.

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

이제 먼저 "; {name} ="으로 나눌 수 있으며, 쿠키 문자열에 토큰이 있으면 (즉, 두 개의 요소가있는 경우) 두 번째 요소는 쿠키 값으로 시작하는 문자열이됩니다. 그런 다음 배열 (예 : 팝)에서 꺼내고 동일한 프로세스를 반복하지만 이제 ";" 토큰으로, 그러나 이번에는 실제 토큰 값을 얻기 위해 왼쪽 문자열 (즉, 시프트)을 꺼내십시오.


쿠키에 단일 정규식 일치를 사용하는 것이 좋습니다.

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 덕분에 개선되었습니다.


쿠키 얻기 스크립트를 사용하십시오.

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 쿠키 페이지에서 위의 코드를 훔쳤습니다. 당신은 그것을 읽어야합니다 .


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

정규 표현식을 사용하는 다른 답변 중 일부의 메소드는 특히 모든 경우를 다루지는 않습니다.

  1. 쿠키가 마지막 쿠키 인 경우 이 경우 쿠키 값 뒤에 세미콜론이 없습니다.
  2. 다른 쿠키 이름이 검색중인 이름으로 끝나는 경우 예를 들어, "one"이라는 쿠키를 찾고 있는데 "done"이라는 쿠키가 있습니다.
  3. 쿠키 이름 앞에 백 슬래시가없는 한 정규 표현식에서 사용될 때 자체로 해석되지 않는 문자가 쿠키 이름에 포함 된 경우

다음 방법은 이러한 경우를 처리합니다.

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쿠키를 찾지 못하면 반환 합니다. 쿠키 값이 비어 있으면 빈 문자열을 반환합니다.

노트:

  1. 이 함수는 쿠키 이름이 대소 문자를 구분 한다고 가정 합니다 .
  2. document.cookie-할당의 오른쪽에 표시되면 세미콜론으로 구분 된 쿠키 목록이 포함 된 문자열을 나타냅니다 name=value. 각 세미콜론 뒤에는 공백이 하나있는 것 같습니다.
  3. String.prototype.match()- null일치하는 것이 없으면 반환 합니다. 일치하는 항목이 발견되면 배열을 반환하고 index의 요소 [1]는 첫 번째 일치하는 그룹의 값입니다.

정규식 참고 사항 :

  1. (?:xxxx) -일치하지 않는 그룹을 형성합니다.
  2. ^ -문자열의 시작과 일치합니다.
  3. | -그룹에 대한 대체 패턴을 분리합니다.
  4. ;\\s* -하나의 세미콜론 다음에 0 개 이상의 공백 문자가옵니다.
  5. = -하나의 등호와 일치합니다.
  6. (xxxx) -일치하는 그룹을 형성합니다.
  7. [^;]*-세미콜론 이외의 0 개 이상의 문자와 일치합니다. 즉, 세미콜론 또는 문자열 끝까지는 포함하지만 포함하지 않는 문자와 일치합니다.

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)

스캔하지 않고 모든 쿠키를 읽습니다. 적은 수의 쿠키도 괜찮습니다.


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를 반환하면 쿠키가 존재하지 않습니다. 이게 도움이 되길 바란다.


나는 그것이 오래된 질문이라는 것을 알고 있지만이 문제도 겪었습니다. 기록을 위해 개발자 mozilla 웹 페이지 에는 약간의 API가 있습니다.

Yoy는 JS 만 사용하여 이름으로 쿠키를 얻을 수 있습니다. 코드는 또한 IMHO가 더 깨끗합니다 (긴 줄을 제외하고는 쉽게 고칠 수 있다고 확신합니다).

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

주석에서 언급했듯이이 메소드는 키와 값이 encodeURIComponent ()를 사용하여 인코딩되었다고 가정합니다. 쿠키의 키와 값이 인코딩되지 않은 경우 decode & encodeURIComponent ()를 제거하십시오.


사용하다 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 );

쿠키도 자동으로 업데이트되므로 쿠키를 변경하면 쿠키 Cookies도 변경됩니다.


kirlich 는 좋은 해결책을 제시했습니다. 그러나 이름이 비슷한 쿠키 값이 두 개이면 실패합니다.이 상황에 대한 간단한 수정 사항은 다음과 같습니다.

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

js-cookie 라이브러리를 사용 하여 JavaScript 쿠키를 가져오고 설정할 수 있습니다 .

HTML에 포함 :

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

쿠키를 만들려면

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

쿠키를 읽으려면 :

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

항상 잘 작동합니다 :

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.


쿠키 이름으로 쿠키 얻기를위한 간단한 기능 :

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

꽤 짧은 버전입니다

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

ES6의 템플릿 문자열을 사용하여 정규 표현식을 작성했습니다.


분명히 MDN 단어 경계 정규식 문자 클래스 들어 본 적이없는 \b연속 일치 \w+와 양쪽에 묶여 있다는 \W+:

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

var obligations = getCookie('obligations');

쿠키 키-값 쌍을 배열로 나누고 검색을 기반으로 할 수있는 것 같습니다.

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

내 프로젝트에서 다음 기능을 사용하여 이름으로 쿠키에 액세스합니다.

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

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

쿠키를 얻는 데 이미 좋은 답변이 있지만 여기에 내 솔루션이 있습니다.

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

자바 스크립트로 설정

document.cookie = 'cookiename=tesing';

jquery-cookie 플러그인 으로 jquery로 가져 오기

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

alert(value);

참조 : 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);

쿠키가 존재하는지 확인 해야하는 경우 다음을 수행하십시오.

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

cookie logging = true 인 경우 1이 아닌 경우 2를 얻게됩니다.

logs = true-쿠키 이름 = 값 또는 이름 만 변경하십시오.


내 해결책은 이것입니다 :

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

이 함수는 Underscorejs _.find-function을 사용합니다. 쿠키 이름이 존재하지 않으면 undefined를 반환


나는 이렇게했다. 값을 분리하기 위해 액세스 할 수있는 객체를 얻습니다.이 u를 사용하면 쿠키를 부모에게 전달할 수 있으며 다음과 같은 키로 값에 액세스 할 수 있습니다

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

기존 쿠키를 찾기위한 기능적 접근. 배열을 반환하므로 같은 이름의 여러 항목을 지원합니다. 부분 키 일치를 지원하지 않지만 필터의 ===를 정규식으로 바꾸는 것은 쉽지 않습니다.

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

다음 함수는 key-value필요한 쿠키 쌍을 반환합니다 . 여기서 key쿠키 이름은 쿠키 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;
};

쿠키 예 : 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을 사용하여 배열 및 객체 저장


나는 이런 식으로 할 것입니다 :

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']

쿠키 값을 이름으로 가져 오기 위해 클로저를 사용하고 싶습니다. 아래 클로저를 사용하면 이름으로 쿠키 값을 얻을 수 있지만 쿠키 문자열이 업데이트 된 경우에만 구문 분석합니다.

다음을 사용하여 쿠키 값을 검색 할 수 있습니다.

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

이 답변에 "공식적인"답변을 추가하기 위해 MDN 에서 쿠키를 설정하고 검색하는 솔루션을 복사 / 붙여 넣기하고 있습니다 (여기서는 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"로 바꿨습니다.

참고 URL : https://stackoverflow.com/questions/10730362/get-cookie-by-name



반응형