Jquery는 username_jquery를 기억하기 위해 쿠키를 작동합니다.

1. jquery.cookie.js 소개

jquery.cookie.js는 jquery 기반 플러그인으로, 쿠키를 읽고 쓰고 삭제할 수 있는 경량 쿠키 플러그인입니다.

jquery.cookie.js는 Github https://github.com/carhartl/jquery-cookie에서 소스 코드를 얻을 수 있습니다

2. jquery.cookie.js 기본 사용법 소개

쿠키를 운용하는 jQuery 플러그인으로, 대략적인 사용방법은 다음과 같습니다.

1. 쿠키 값 읽기

$.cookie('the_cookie'); //cookieValue가 존재하면 반환하고, 그렇지 않으면 null을 반환합니다.

2. 쿠키 값 설정

(1) 기본 설정. 쿠키 시간을 지정하지 않은 경우 생성된 쿠키는 기본적으로 사용자의 브라우저가 닫힐 때까지 유효하므로 이를 세션 쿠키라고 합니다.

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

(2) 시간에 따라 쿠키를 설정합니다. 시간이 지정된 경우 이를 영구 쿠키라고 하며 유효 시간은 일수입니다.

$.cookie('cookieName','cookieValue', {expires：7})

(3) 경로로 쿠키를 설정합니다. 유효한 경로가 설정되지 않으면 기본적으로 쿠키 설정의 현재 페이지에서만 쿠키를 읽을 수 있습니다. 쿠키 경로는 쿠키를 읽을 수 있는 최상위 디렉터리를 설정하는 데 사용됩니다.

$.cookie('cookieName','cookieValue', {expires：7, path：'/'})

(4) 특정 웹사이트에 대한 쿠키를 설정합니다.

$.cookie('cookieName','cookieValue',{expires：7, path：'/' , domain: 'souvc.com' , secure: false , raw:false});

매개변수 설명:

1).만료: 365

쿠키의 유효 시간을 정의합니다. 값은 숫자(쿠키가 생성된 후 일수) 또는 날짜 객체일 수 있습니다. 생략할 경우 생성된 쿠키는 세션 쿠키이며 사용자가 브라우저를 종료할 때 삭제됩니다.

//참고: 기본적으로 쿠키를 설정한 웹페이지에서만 쿠키를 읽을 수 있습니다. 한 페이지가 다른 페이지에서 설정한 쿠키를 읽을 수 있도록 하려면 쿠키 경로를 설정해야 합니다. 쿠키 경로는 쿠키를 읽을 수 있는 최상위 디렉터리를 설정하는 데 사용됩니다. 이 경로를 웹사이트의 루트 디렉터리로 설정하면 모든 웹페이지가 서로의 쿠키를 읽을 수 있습니다. 일반적으로 충돌을 방지하려면 이 경로를 설정하지 마세요.

만료: (숫자 | 날짜) 유효 기간, 정수를 유효 기간(단위: 일)으로 설정하거나 날짜 객체를 쿠키의 만료 날짜로 설정할 수 있습니다. 지정된 날짜가 음수인 경우 이 쿠키는 삭제됩니다. 설정되지 않거나 null로 설정된 경우 이 쿠키는 세션 쿠키로 처리되어 브라우저가 닫힌 후 삭제됩니다.

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

2).경로: '/'

기본값: 쿠키를 설정한 웹페이지만 쿠키를 읽을 수 있습니다. 쿠키의 유효한 경로를 정의합니다. 기본적으로 이 매개변수의 값은 쿠키를 생성한 웹 페이지의 경로입니다(표준 브라우저 동작). 웹사이트 전체에서 이 쿠키에 액세스하려면 경로: '/'와 같이 유효 경로를 설정해야 합니다.

유효한 경로를 정의하는 쿠키를 삭제하려면 함수 호출 시 $.cookie('the_cookie', null, { path: '/' }); 경로를 포함해야 합니다. 도메인: 'example.com' 기본값: 쿠키를 생성한 웹페이지의 도메인 이름입니다.

3) 도메인: 쿠키가 생성된 웹페이지가 소유한 도메인 이름

4) 보안: 기본값은 false입니다. true인 경우 쿠키 전송 프로토콜은 https 원시여야 합니다. 기본값은 false이며, 읽고 쓸 때 자동으로 인코딩 및 디코딩됩니다(인코딩하려면 encodeURIComponent를 사용하고, 디코딩하려면 decodeURIComponent를 사용합니다). ), 이 기능을 끄려면 true로 설정하세요.

3. 쿠키를 삭제합니다.

$.cookie('the_cookie', null) //쿠키 삭제

$.cookie('cookieName',null,{path:'/'}); //참고: 유효한 경로가 있는 쿠키를 삭제하려는 경우

3. 이용방법

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

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>

4. 간략한 설명.

1. 페이지 효과

2.jsp 페이지:

<input type="text" class="lr-input" placeholder="手机号码/用户名" style="width:255px" id="username" name="username" value=""/> <input type="password" class="lr-input" placeholder="请输入登录密码" style="width:255px" id="password" name="password" />
<div class="lr-formWrap fn-clear">
<p class="lr-remUser fn-left" id="remUserSelect"><i class="icon-check"></i>记住用户</p>
<a href="javascript:void(0)" id="login-submit" class="lr-submit">登录</a>

3. CSS 스타일:

.lr-remUser {
color: #9d9d9d;
cursor: pointer;
font-size: 14px;
line-height: 25px;
padding-left: 30px;
}

4.JS 구현

//按照状态读取是否显示昵称
if ($.cookie("rmbUser") == "true") {
$("#remUserSelect").addClass("active");//如果是选中，那么给上选中的标志
$("#username").val($.cookie("nickName"));//记录账号
}
//验证记住帐号
function vailRememberNickName(){
if($("#remUserSelect").hasClass("active")){
var nickName = $("#username").val();
$.cookie("rmbUser", "true", { expires: 7 }); // 存储一个带7天期限的 cookie
$.cookie("nickName", nickName, { expires: 7 }); // 存储一个带7天期限的 cookie
}else {
$.cookie("rmbUser", "false", { expires: -1 });
$.cookie("nickName", '', { expires: -1 });
}
}

5. 그런 다음 로그인을 클릭하면 이 메소드를 호출합니다.

//登录提交表单
$("#login-submit").on("click",function(){
var form = $("#loginForm");
if(!vailPhone())return;
if(!vailPwd())return;
vailRememberNickName();
form.submit();
});

6. 다음과 같이 로그인하여 브라우저 콘솔 효과를 확인하세요.

7. 로그아웃하면 로그인 상자의 효과를 확인할 수 있습니다.

위 내용은 편집자가 소개한 사용자 이름을 기억하기 위한 Jquery 운영 쿠키 관련 지침입니다. 모든 분들께 도움이 되길 바랍니다!