자바 스크립트로 쿠키를 다루는 방법

수년 동안 많은 웹 개발자는 클라이언트 측에 데이터를 저장해야합니다. HTML5와 새로운 메커니즘이 등장하기 전에 모든 개발자는이 목표를 달성하기 위해

쿠키 ​​

를 사용했습니다. 불행히도, JavaScript에서 쿠키를 사용하면 많은 문제가 발생할 수 있습니다. 이 기사에서는 쿠키가 무엇인지, 쿠키를 작성, 검색 및 삭제하기 위해 기능을 구축하는 방법에 대해 설명합니다. 키 포인트

쿠키는 웹 사이트에서 전송되고 사용자의 브라우저가 로컬로 보관 한 데이터 조각입니다. HTTP는 상태가 없기 때문에 사용자 활동을 추적하는 데 사용됩니다. 그러나 쿠키는 최대 4KB의 데이터 만 저장할 수 있으며 각 HTTP 요청은 서버로 전송되므로 네트워크 대역폭을 소비 할 수 있습니다. html5의 결과로 쿠키에 대한 대안이 등장했습니다. 여기에는 웹 스토리지 API (스토리지 이름 값 쌍)와 웹 SQL 데이터베이스 API (SQL 변형을 사용하여 쿼리 할 수있는 데이터베이스의 스토리지 데이터)가 포함됩니다. 또 다른 대안은 인덱스 데이터베이스 API로 간단한 값과 계층 객체를 보유하는 레코드가 포함 된 데이터베이스를 정의합니다. javaScript는 속성을 ​​사용하여 쿠키를 작성, 검색 및 삭제할 수 있습니다. 그러나 자바 스크립트로 쿠키를 처리하는 것은 기본 방법이 없기 때문에 어려울 수 있습니다. 개발자는 일반적으로 쿠키를 관리하기 위해 자체 기능을 만들어야합니다.

쿠키는 세미콜론 구분 된 키 가치 쌍으로 구성된 간단한 구조를 가지고 있으며 키와 값은 동일한 부호로 분리됩니다. 선택적으로 만료 날짜가있을 수 있으며 만료 후 삭제됩니다. 만료 날짜가 제공되지 않으면 쿠키는 세션이나 브라우저가 닫힐 때까지 지속됩니다. 쿠키에 읽고 쓸 수있는 도메인과 경로를 지정할 수도 있습니다.

쿠키 란 무엇입니까?
• 쿠키는 웹 사이트에서 전송되고 사용자의 브라우저에서 로컬로 저장되는 데이터입니다. http가
stanteless 이기 때문에 쿠키가 필요합니다. 이는 HTTP 자체가 사용자의 이전 활동을 추적 할 수 없음을 의미합니다. 쿠키를 사용하는 것은 상태를 만드는 방법입니다. document.cookie 쿠키를 사용하십니까?
• 이제 거의 모든 웹 사이트에서 쿠키를 사용합니다. 그러나 쿠키는 최대 4KB의 데이터 만 저장할 수 있기 때문에 상당히 제한적입니다. 또한 많은 개발자들은 HTTP 요청이있을 때마다 쿠키가 서버로 전송되기 때문에 대형 쿠키는 많은 네트워크 대역폭을 소비하여 성능에 영향을 미칩니다. Remy Sharp는 공동 저술 된 책에서 HTML5를 소개하는 쿠키에 대한 또 다른 중요한 비판을했습니다. 이것은 모바일 연결에 비참 할 수 있습니다. 기억해야 할 또 다른 중요한 사항은 유럽 방문자가있는 경우 웹 사이트가 2012 년 5 월 26 일의 EU 전자 개인 정보 보호 지침을 준수해야한다는 것입니다. 이에 대해 들어 본 적이 없다면 지금 유럽에서 웹 사이트가 불법적 인 이유를 확인하십시오. 최근 몇 년 동안 사람들은 쿠키에 대한 대안을 찾으려고 노력했습니다. HTML5의 출현으로 인해 일부 새로운 기술이 등장했습니다. 첫 번째는 웹 스토리지 API이며 이름 값 쌍을 저장하는 메소드가 있습니다. 웹 스토리지 API에 대한 개요를 보려면 웹 스토리지 API 개요를 읽는 것이 좋습니다. 두 번째 대안은 SQL 변형을 사용하여 쿼리 할 수있는 데이터베이스에 데이터를 저장하는 Web SQL 데이터베이스 API입니다. Web SQL은 잘 지원하지만이 표준은 더 이상 적극적으로 유지 관리되지 않습니다. 마지막으로 간단한 값과 계층 객체를 보유하는 레코드가 포함 된 데이터베이스를 정의하는 Index Database API입니다. "HTML5 INDEXEDDB의 심층 학습"에서 indexedDB에 대한 자세한 내용을 읽을 수 있습니다. 불행히도, indexeddb는 널리 지원되지 않으므로 아마도 그것에 의존해서는 안됩니다. 어느 쪽을 좋아하든 알아야 할 중요한 요점이 있습니다. 이러한 모든 API는 쿠키와 유사한 로컬 스토리지를 제공하지만 데이터를 서버로 다시 보내지 않습니다. 따라서 대부분의 경우 쿠키와 스토리지 API 중 하나를 모두 사용합니다. 기술적으로 AJAX를 사용하여 동일한 효과를 달성 할 수 있지만 작업을 과도하게 복제하고 추가 코드가 필요할 수 있습니다.
  쿠키를 만드는 방법

  쿠키의 구조는 매우 간단합니다. 몇 가지 키 가치 쌍일뿐입니다. 쌍은 세미콜론으로 분리되며 동일한 부호 문자는 키를 그 값에서 분리합니다. 쿠키는 만료 날짜를 갖도록 선택할 수 있으며 만료 후 삭제됩니다. 만료 날짜가 제공되지 않으면 쿠키는 세션이나 브라우저가 닫힐 때까지 지속됩니다. 만료 날짜를 과거로 설정하면 브라우저가 쿠키를 삭제합니다. 날짜 형식은 UTC/GMT 여야하므로 중요합니다. 또한 쿠키를 읽고 쓸 수있는 도메인과 경로를 지정할 수 있습니다. 기본적으로 경로 값은 "/"이므로 쿠키가 주어진 도메인의 모든 경로에 표시됩니다. 도메인을 지정하지 않으면 쿠키가 설정된 페이지에 속합니다. 이 데이터가 설정된 방식도 중요합니다. 순서는 다음과 같습니다. 다음 예제는 도메인의 모든 경로에서 액세스 할 수있는 쿠키와 하나의 키 값 쌍 만 보여줍니다. 다음 예는 도메인의 모든 경로에서 접근 할 수있는 쿠키 (기본값 IS)를 보여 주며 2012 년 10 월 31 일 오전 11시에 만료됩니다.

  스크립트 쿠키

  지금까지, 나는 쿠키가 무엇인지, 그리고 그들의 장단점 중 일부를 설명했습니다. 이제 JavaScript가 어떤 기능을 처리하기 위해 노출되는지 확인할 때입니다. 불행히도, 내가 말하고 싶은 첫 번째 것은 JavaScript가

  쿠키를 처리 할 수있는 기본 방법이 없다는 것입니다. javaScript는 속성을 ​​사용하여 쿠키를 생성, 검색 및 삭제할 수 있지만 이는 만족스럽지 않습니다. document.cookie, split() 및 루프를 처리해야 할 때마다. substring()를 문자열 변수로 생각할 수는 있지만 실제로는 문자열 변수 이상입니다. 예를 들어, 다음 스크립트를 참조하십시오 : document.cookie

  그런 다음 인쇄하면 , 아래와 같이 예상치 못한 결과가 나타납니다.

  <code>visits=3; path=/;</code>

  지금까지, 당신은 자바 스크립트에서 쿠키를 다루는 데 어려움을 겪었습니다. 이제 우리 자신만의 기능을 만들어 쉽게 관리 할 때입니다. 다음 기능은 쿠키를 만드는 데 도움이됩니다.

  매개 변수는 날짜 개체의 인스턴스이거나 일 수를 나타내는 숫자 일 수 있습니다. 후자는 음수 일 수 있으며, 이는 만료 날짜를 과거로 설정합니다. document.cookie

  당신은이 기능을 이렇게 호출 할 수 있습니다.

  <code>last-visit=Mon, 15 Oct 2012 19:36:00 GMT; expires=Wed, 31 Oct 2012 11:00:00 GMT;</code>

  이제 쿠키를 설정 했으므로 검색 할 수 있어야합니다. 주어진 키와 다음 expires 함수를 사용하여이를 수행합니다. 발견하면 키의 값을 반환하고 그렇지 않으면 NULL을 반환합니다.

  <code class="language-javascript">document.cookie = "visits=3; path=/;";
  document.cookie = "last-visit=Mon, 15 Oct 2012 19:36:00 GMT; expires=Wed, 31 Oct 2012 11:00:00 GMT;";</code>

  를 사용하는 것은 매우 간단합니다. 아래와 같이 키를 매개 변수로 전달합니다.

  <code class="language-javascript">console.log(document.cookie);
  // 打印 visits=3; last-visit=Mon, 15 Oct 2012 19:36:00</code>

  이제 쿠키를 삭제하려면 마지막 기능이 필요합니다. 표시된 기능은 주어진 이름이 설정되어 있는지 테스트하고 만료 날짜를 과거로 설정하기 위해

  에 의존하기 때문에 매우 간단합니다. getCookie()

  이 기능을 고려할 때 쿠키를 삭제하려면 간단히 쓸 수 있습니다.

  <code class="language-javascript">function createCookie(name, value, expires, path, domain) {
    var cookie = name + "=" + escape(value) + ";";
  
    if (expires) {
      // 如果是日期
      if(expires instanceof Date) {
        // 如果不是有效的日期
        if (isNaN(expires.getTime()))
         expires = new Date();
      }
      else
        expires = new Date(new Date().getTime() + parseInt(expires) * 1000 * 60 * 60 * 24);
  
      cookie += "expires=" + expires.toGMTString() + ";";
    }
  
    if (path)
      cookie += "path=" + path + ";";
    if (domain)
      cookie += "domain=" + domain + ";";
  
    document.cookie = cookie;
  }</code>

  표시된 기능을 사용하면 쿠키를 쉽게 관리 할 수 ​​있습니다. 네트워크에는 다른 많은 쿠키 처리 기능이 있습니다. 당신이 찾을 수있는 수많은 기능들 중에서, 나는 당신에게 quirksmode.com의 프론트 엔드 개발 전문가 Peter-Paul Koch (P.P.K.)가 쓴 기능을 보여 드리고자합니다. 이 기사에 포함시킬 수있게 해주셔서 감사합니다. P.P.K. 쿠키 생성 기능은 다음과 같습니다.

  getCookie() 마찬가지로 쿠키를 검색하려면 다음 기능을 사용하십시오.

  <code class="language-javascript">createCookie("website", "audero.it", new Date(new Date().getTime() + 10000));
  createCookie("author", "aurelio", 30);</code>

  이것은 쿠키를 삭제하는 기능입니다.

  getCookie() 결론 createCookie()

  이 기사에서 쿠키가 무엇인지, 어떻게 만들어 졌는지, 그리고 장단점을 배웠습니다. 또한 사용자 정의 기능을 사용하여 쿠키를 처리하는 방법을 배웠습니다. 이전 게시물에서 지적했듯이 JavaScript에는 일부 기본 유틸리티 기능이 없습니다. 다행히도 자신의 기능을 쉽게 구축하거나 네트워크를 검색하여 문제를 해결할 수 있습니다.

  <code class="language-javascript">function getCookie(name) {
    var regexp = new RegExp("(?:^" + name + "|;\s*"+ name + ")=(.*?)(?:;|$)", "g");
    var result = regexp.exec(document.cookie);
    return (result === null) ? null : result[1];
  }</code>

  JavaScript의 쿠키를 처리 할 때

  FAQS (FAQS)

  (FAQ 부분은 길이가 너무 길고 의사 원리 목표와 일치하지 않기 때문에 여기서 생략됩니다. FAQ 부분의 내용은 원래 텍스트와 우연의 일치이며 의사 원리 성이 어렵습니다. 그러니 원래 텍스트를 유지하십시오.)

위 내용은 자바 스크립트로 쿠키를 다루는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!