반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- SwiftUI
- 이클립스
- 코틀린
- kotlin2.0
- node
- node.js
- ios
- php
- express
- 서버
- kotlininaction
- 변수
- npm
- 플러터
- 스나이퍼팩토리
- jquery
- 의존주입
- Flutter
- php개발
- 그림으로 배우는 서버구조
- php변수
- 설치
- 정보처리기사
- android
- java
- Eclipse
- 조건문
- Kotlin
- script
- 스터디
Archives
- Today
- Total
mygomii
[script&Jquery] #쿠키(Cookie)를 이용한 ID정보기억 본문
반응형
쿠키를 이용한 아이디 기억하기
1 2 3 4 5 | <input type="text" id="my_id"> <input type="checkbox" id="remember" value="로그인 정보 기억하기"> <label for="remember">로그인 정보 기억하기</label> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | $(document).ready(function(){ // 저장된 쿠키값을 가져와서 ID 칸에 넣어준다. 없으면 공백으로 들어감. var userInputId = getCookie("userInputId"); $("input[id='my_id']").val(userInputId); if($("input[id='my_id']").val() != ""){ // 그 전에 ID를 저장해서 처음 페이지 로딩 시, 입력 칸에 저장된 ID가 표시된 상태라면, $("#remember").attr("checked", true); // ID 저장하기를 체크 상태로 두기. } $("#remember").change(function(){ // 체크박스에 변화가 있다면, if($("#remember").is(":checked")){ // ID 저장하기 체크했을 때, var userInputId = $("input[id='my_id']").val(); setCookie("userInputId", userInputId, 7); // 7일 동안 쿠키 보관 }else{ // ID 저장하기 체크 해제 시, deleteCookie("userInputId"); } }); // ID 저장하기를 체크한 상태에서 ID를 입력하는 경우, 이럴 때도 쿠키 저장. $("input[id='user_id']").keyup(function(){ // ID 입력 칸에 ID를 입력할 때, if($("#remember").is(":checked")){ // ID 저장하기를 체크한 상태라면, var userInputId = $("input[id='my_id']").val(); setCookie("userInputId", userInputId, 7); // 7일 동안 쿠키 보관 } }); //쿠키를 위한 함수 function setCookie(cookieName, value, exdays){ var exdate = new Date(); exdate.setDate(exdate.getDate() + exdays); var cookieValue = escape(value) + ((exdays==null)?"":";expires="+exdate.toGMTString()); document.cookie = cookieName + "=" + cookieValue; } function deleteCookie(cookieName){ var expireDate = new Date(); expireDate.setDate(expireDate.getDate() - 1); document.cookie = cookieName + "= " + "; expires=" + expireDate.toGMTString(); } function getCookie(cookieName) { cookieName = cookieName + '='; var cookieData = document.cookie; var start = cookieData.indexOf(cookieName); var cookieValue = ''; if(start != -1){ start += cookieName.length; var end = cookieData.indexOf(';', start); if(end == -1)end = cookieData.length; cookieValue = cookieData.substring(start, end); } return unescape(cookieValue); } }); |
반응형
'JavaScript&JQuery' 카테고리의 다른 글
[script&Jquery] #두개의 날짜 범위 설정 datepicker (0) | 2018.05.02 |
---|---|
[script&Jquery] #빈값(null) 체크하기 (0) | 2018.04.24 |
[script&Jquery] #체크박스 전체선택&해제&삭제하기 (0) | 2018.04.20 |
[script&Jquery] #비밀번호 유효성(회원가입) - 영문+숫자+특수문자 (0) | 2018.04.14 |
[script] #쿠키를 위한 함수(setCookie,getCookie,deleteCookie) (2) | 2018.03.17 |