집 >웹 프론트엔드 >JS 튜토리얼 >jquery.cookie Usage_jquery 상세 분석

jquery.cookie Usage_jquery 상세 분석

WBOY원래의: 2016-05-16 17:08:411360검색

쿠키는 서버에 의해 생성되어 사용자 에이전트(일반적으로 브라우저)로 전송됩니다. 브라우저는 쿠키의 키/값을 특정 디렉터리의 텍스트 파일에 저장하고 다음에 동일한 웹사이트에 보냅니다. 이 쿠키는 서버에 제공됩니다(브라우저가 쿠키를 활성화하도록 설정된 경우).

예를 들어 쇼핑 웹사이트는 사용자가 검색한 상품 목록을 저장하고, 포털 웹사이트는 사용자가 어떤 유형의 뉴스를 좋아하는지 기억합니다. 사용자의 허가가 있으면 사용자의 로그인 정보를 저장하여 사용자가 웹사이트를 방문할 때마다 로그인 정보를 입력할 필요가 없도록 하는 것도 가능합니까?

js/jquery에서 쿠키를 처리하는 방법은 무엇입니까? 오늘은 경량 쿠키 관리 플러그인인 쿠키 작업 클래스인 jQuery.Cookie.js를 공유하겠습니다.

쿠키 다운로드 주소: http://plugins.jquery.com/project/cookie.

특별 알림, 오늘 특별한 오류가 발견되었습니다. Google 브라우저에 $.cookie 메소드가 없습니다. Firefox 브라우저에 다음 메시지가 표시됩니다. $.cookie는 함수가 아닙니다. 오랜 시간 동안 디버깅한 후 마침내 이유를 찾았습니다. 동일한 페이지에 Jquery 플러그인이 두 번 또는 여러 번 소개되면 이 오류가 보고됩니다.

사용방법 :

1. jQuery 및 jQuery.Cookie.js 플러그인을 소개합니다.

코드 복사 코드는 다음과 같습니다.

d9adef48bd8eb639ce295ee4c679039b2cacc6d41bbb37262a98f745aa00fbf0
6ea3bd74ac09c0e98bf4257db9cb49762cacc6d41bbb37262a98f745aa00fbf0

2. 파일에 쿠키 쓰기

 var COOKIE_NAME = 'username';  
  if( $.cookie(COOKIE_NAME) ){  
    $("#username").val( $.cookie(COOKIE_NAME) );  
  }  
  $("#check").click(function(){  
    if(this.checked){  
      $.cookie(COOKIE_NAME, $("#username").val() , { path: '/', expires: 10 });  
      //var date = new Date();  
      //date.setTime(date.getTime() + (3 * 24 * 60 * 60 * 1000)); //三天后的这个时候过期  
      //$.cookie(COOKIE_NAME, $("#username").val(), { path: '/', expires: date });  
    }else{  
      $.cookie(COOKIE_NAME, null, { path: '/' }); //删除cookie  
    }  
  });

기능.

구문: $.cookie(이름, 값, [옵션])

　(1) 쿠키 값 읽기

$.cookie(cookieName) cookieName: 읽어올 쿠키의 이름입니다.

예: $.cookie("username"); 쿠키에 저장된 사용자 이름 값을 읽습니다.

　(2) 설정된 쿠키 값을 작성합니다.

$.cookie(cookieName,cookieValue); cookieName: 설정할 쿠키의 이름, cookieValue는 해당 값을 나타냅니다.

예: $.cookie("username","admin"); 사용자 이름이라는 쿠키에 "admin" 값을 씁니다.

$.cookie("username",NULL); username이라는 쿠키를 삭제합니다

　(3) [옵션] 매개변수 설명:

만료: 제한된 날짜, 정수 또는 날짜(단위: 일)일 수 있습니다. 여기서도 주의하셔야 합니다. 이 항목을 설정하지 않으면 브라우저를 닫은 후 쿠키가 무효화됩니다.

경로: 쿠키 값이 저장되는 경로는 기본적으로 생성된 페이지의 경로와 일치합니다.

domin: 쿠키 도메인 이름 속성, 기본값은 생성된 페이지의 도메인 이름과 동일합니다. 이곳은 크로스도메인 개념에 주목해야 합니다. 기본 도메인 이름과 보조 도메인 이름이 유효하려면 ".xxx.com"을 설정해야 합니다.

secure: 쿠키 값을 전송할 때 보안 프로토콜이 필요한지 여부를 나타내는 부울 값입니다.

예:

코드 복사 코드는 다음과 같습니다.

$.cookie("like", $(":radio[checked]").val(), { 

경로: "/", 만료: 7 

         })

쿠키 설정 및 읽기를 위한 전체 페이지 코드:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
  <title>jQuery学习2</title> 
  <script src="jQuery.1.8.3.js" type="text/javascript"></script> 
  <script src="jquery.cookie.js" type="text/javascript"></script> 
  <script type="text/javascript"> 
    $(function () { 
      $("#username").val($.cookie("username")); 
      if ($.cookie("like") == "刘德华") { 
        $(":radio[value='刘德华']").attr("checked", 'checked') 
      } 
      else { 
        $(":radio[value='张学友']").attr("checked", 'checked') 
      } 
      $(":button").click(function () { 
        $.cookie("username", $("#username").val(), { 
          path: "/", expires: 7 
        }) 
        $.cookie("like", $(":radio[checked]").val(), { 
          path: "/", expiress: 7 
        }) 
      }) 
    }) 
  </script> 
</head> 
<body> 
  <p><input type="text" id="username" value="" /></p> 
  <p> 
    <input type="radio" name="like" value="刘德华" />刘德华 
    <input type="radio" name="like" value="张学友" />张学友 
  </p> 
  <p><input type="button" value="保存" /></p> 
</body> 
</html>

쿠키는 기본적으로 txt 텍스트이므로 문자열로만 저장할 수 있습니다. 일반적으로 개체는 쿠키에 저장되기 전에 직렬화되어야 하며, 검색할 때 개체를 다시 가져오려면 역직렬화해야 합니다. .

$(function () { 
     if ($.cookie("o") == null) { 
       var o = { name: "张三", age: 24 }; 
       var str = JSON.stringify(o);　　//对序列化成字符串然后存入cookie 
       $.cookie("o", str, { 
         expires:7  //设置时间，如果此处留空，则浏览器关闭此cookie就失效。 
       }); 
       alert("cookie为空"); 
     } 
     else { 
       var str1 = $.cookie("o"); 
       var o1 = JSON.parse(str1);　　//字符反序列化成对象 
       alert(o1.name);　　　　　　　　//输反序列化出来的对象的姓名值 
     } 
   })

쿠키를 읽고, 쓰고, 삭제할 수 있는 경량 쿠키 플러그인입니다.

jquery.cookie.js 구성

jQuery 라이브러리 파일을 먼저 포함시킨 후 jquery.cookie.js 라이브러리 파일을 포함하세요

967ba072082ba7f55ea5396b9cdf91542cacc6d41bbb37262a98f745aa00fbf0 24072ae8460dd165378b4c66bd005edd2cacc6d41bbb37262a98f745aa00fbf0

사용방법

새 세션 쿠키 추가:

$.cookie('the_cookie', 'the_value');

참고: 쿠키 유효 기간을 지정하지 않으면 생성된 쿠키는 기본적으로 사용자가 브라우저를 닫을 때까지 유효하므로 이를 "세션 쿠키"라고 합니다.

쿠키를 생성하고 유효 기간을 7일로 설정하세요:

$.cookie('the_cookie', 'the_value', { 만료일: 7 });

참고: 쿠키 유효 기간이 지정되면 생성된 쿠키를 "영구 쿠키"라고 합니다.

쿠키를 생성하고 쿠키에 대한 유효한 경로를 설정합니다:

$.cookie('the_cookie', 'the_value', { 만료: 7, 경로: '/' });

참고: 기본적으로 쿠키를 설정한 웹페이지에서만 쿠키를 읽을 수 있습니다. 다른 페이지에서 설정한 쿠키를 해당 페이지에서 읽을 수 있도록 하려면 쿠키 경로를 설정해야 합니다.

쿠키 경로는 쿠키를 읽을 수 있는 최상위 디렉터리를 설정하는 데 사용됩니다. 이 경로를 웹사이트의 루트 디렉터리로 설정하면 모든 웹페이지가 서로의 쿠키를 읽을 수 있습니다. (일반적으로 충돌을 방지하려면 이 경로를 설정하지 마세요.)

쿠키 읽기:

$.cookie('the_cookie');

// 쿠키가 존재함 => 'the_value' $.cookie('not_existing') // 쿠키가 존재하지 않음 =>

쿠키를 삭제하려면 쿠키 값으로 null을 전달하세요.

$.cookie('the_cookie', null);

jquery.cookie Usage_jquery 상세 분석

관련 기사