[javascript] 쿠키에서 값을 생성하고 읽는 방법은 무엇입니까?

JAVASCRIPT / 글쓴이

JavaScript 쿠키에서 값을 생성하고 읽는 방법은 무엇입니까?

답변

쿠키 생성 및 검색에 사용할 수있는 기능은 다음과 같습니다.

function createCookie(name, value, days) {
    var expires;
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    }
    else {
        expires = "";
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}

function getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}

답변

최소한의 모든 기능을 갖춘 ES6 접근 방식 :

const setCookie = (name, value, days = 7, path = '/') => {
  const expires = new Date(Date.now() + days * 864e5).toUTCString()
  document.cookie = name + '=' + encodeURIComponent(value) + '; expires=' + expires + '; path=' + path
}

const getCookie = (name) => {
  return document.cookie.split('; ').reduce((r, v) => {
    const parts = v.split('=')
    return parts[0] === name ? decodeURIComponent(parts[1]) : r
  }, '')
}

const deleteCookie = (name, path) => {
  setCookie(name, '', -1, path)
}

답변

jQuery 쿠키

또는 일반 자바 스크립트 :

function setCookie(c_name,value,exdays)
{
   var exdate=new Date();
   exdate.setDate(exdate.getDate() + exdays);
   var c_value=escape(value) + ((exdays==null) ? "" : ("; expires="+exdate.toUTCString()));
   document.cookie=c_name + "=" + c_value;
}

function getCookie(c_name)
{
   var i,x,y,ARRcookies=document.cookie.split(";");
   for (i=0; i<ARRcookies.length; i++)
   {
      x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
      y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
      x=x.replace(/^\s+|\s+$/g,"");
      if (x==c_name)
      {
        return unescape(y);
      }
   }
}

답변

Mozilla는 쿠키 를 사용하고 사용하는 예제 와 함께 완전한 유니 코드를 지원하는 쿠키를 읽고 쓰는 간단한 프레임 워크를 제공 합니다.

페이지에 포함되면 쿠키를 설정할 수 있습니다.

docCookies.setItem(name, value);

쿠키를 읽으십시오 :

docCookies.getItem(name);

또는 쿠키를 삭제하십시오.

docCookies.removeItem(name);

예를 들면 다음과 같습니다.

// sets a cookie called 'myCookie' with value 'Chocolate Chip'
docCookies.setItem('myCookie', 'Chocolate Chip');

// reads the value of a cookie called 'myCookie' and assigns to variable
var myCookie = docCookies.getItem('myCookie');

// removes the cookie called 'myCookie'
docCookies.removeItem('myCookie');

Mozilla의 document.cookie 페이지 에서 더 많은 예제와 세부 사항을 참조하십시오 .

이 간단한 js 파일의 버전은 github에 있습니다.

답변

get ()에 대한 정규식을 사용하는 ES7. MDN 기반 

const Cookie =
    { get: name => {
        let c = document.cookie.match(`(?:(?:^|.*; *)${name} *= *([^;]*).*$)|^.*$`)[1]
        if (c) return decodeURIComponent(c)
        }
    , set: (name, value, opts = {}) => {
        if (opts.days) {
            opts['max-age'] = opts.days * 60 * 60 * 24;
            delete opts.days
            }
        opts = Object.entries(opts).reduce((str, [k, v]) => `${str}; ${k}=${v}`, '')
        document.cookie = name + '=' + encodeURIComponent(value) + opts
        }
    , delete: (name, opts) => Cookie.set(name, '', {'max-age': -1, ...opts})
    // path & domain must match cookie being deleted 
    }
Cookie.set('user', 'Jim', {path: '/', days: 10})
// Set the path to top level (instead of page) and expiration to 10 days (instead of session)

사용법-Cookie.get (name, value [, options]) :
옵션은 모든 표준 쿠키 옵션을 지원하고 “일”을 추가합니다.

  • path : ‘/’-절대 경로입니다. 기본값 : 현재 문서 위치
  • domain : ‘sub.example.com’-점으로 시작할 수 없습니다. 기본값 : 하위 도메인이없는 현재 호스트
  • secure : true-https를 통해서만 쿠키를 제공합니다. 기본값 : false
  • days : 쿠키가 만료 될 때까지 2 일 기본값 : 세션 종료
    만료 설정의 다른 방법 :

    • 만료 : ‘Sun, 18 Feb 2018 16:23:42 GMT’-GMT 문자열로 만료 날짜.
      현재 날짜는 new Date (Date.now ()). toUTCString ()으로 얻을 수 있습니다.
    • ‘max-age’ : 30-일과 동일하지만 일 대신 초 단위입니다.

다른 답변은 이전 IE 버전을 지원하기 위해 “max-age”대신 “expires”를 사용합니다. 이 방법에는 ES7이 필요하므로 IE7은 어쨌든 나오지 않습니다 (이것은별로 중요하지 않습니다).

참고 : “=”및 “{:}”과 같은 재미있는 문자는 쿠키 값으로 지원되며 정규 표현식은 앞뒤 공백을 처리합니다 (다른 라이브러리에서).
객체를 저장하려면 JSON.stringify 및 JSON.parse를 사용하여 전후에 인코딩하거나 위의 내용을 편집하거나 다른 방법을 추가하십시오. 예 :

Cookie.getJSON = name => JSON.parse(Cookie.get(name))
Cookie.setJSON = (name, value, opts) => Cookie.set(name, JSON.stringify(value), opts);

답변

{foo : ‘bar’}와 같은 객체를 저장 해야하는 사람들을 위해 편집 한 @KevinBurke의 답변 버전을 공유합니다. JSON.stringify와 JSON.parse를 추가했습니다.

cookie = {

    set: function (name, value, days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            var expires = "; expires=" + date.toGMTString();
        }
        else
            var expires = "";
        document.cookie = name + "=" + JSON.stringify(value) + expires + "; path=/";
    },

    get : function(name){
        var nameEQ = name + "=",
            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  JSON.parse(c.substring(nameEQ.length,c.length));
        }

        return null;
    }

}

이제 다음과 같은 작업을 수행 할 수 있습니다.

cookie.set('cookie_key', {foo: 'bar'}, 30);

cookie.get('cookie_key'); // {foo: 'bar'}

cookie.set('cookie_key', 'baz', 30);

cookie.get('cookie_key'); // 'baz'

답변

이 스레드의 수락 된 답변을 이미 여러 번 사용했습니다. 간단하고 사용하기 쉬운 훌륭한 코드입니다. 그러나 나는 일반적으로 babel 과 ES6 및 모듈을 사용하므로 나와 같은 경우 ES6으로 더 빨리 개발하기 위해 복사하는 코드가 있습니다.

ES6에서 모듈로 다시 작성된 허용 된 답변 :

export const createCookie = ({name, value, days}) => {
  let expires;
  if (days) {
    let date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = '; expires=' + date.toGMTString();
  } else {
    expires = '';
  }
  document.cookie = name + '=' + value + expires + '; path=/';
};

export const getCookie = ({name}) => {
  if (document.cookie.length > 0) {
    let c_start = document.cookie.indexOf(name + '=');
    if (c_start !== -1) {
      c_start = c_start + name.length + 1;
      let c_end = document.cookie.indexOf(';', c_start);
      if (c_end === -1) {
        c_end = document.cookie.length;
      }
      return unescape(document.cookie.substring(c_start, c_end));
    }
  }
  return '';
};

그리고 나서 당신은 단순히 어떤 모듈로도 가져올 수 있습니다 (물론 경로는 다를 수 있습니다) :

import {createCookie, getCookie} from './../helpers/Cookie';