'JavaScript & jQuery/JavaScript'에 해당되는 글 45건
[JavaScript] Cookie 생성, 삭제 및 읽어오기[JavaScript] Cookie 생성, 삭제 및 읽어오기
Posted at 2018. 9. 3. 01:55 | Posted in JavaScript & jQuery/JavaScript■ 쿠키 개요
-. 쿠키는 키와 값이 들어 있는 작은 데이터 조각으로 이름, 값, 파기 날짜와 경로 정보를 가진다.
-. 쿠키는 서버와 클라이언트에서 모두 저장하고 사용할 수 있다.
-. 쿠키는 일정 기간 동안 데이터를 저장할 수 있으므로, 일정 기간동안 로그인을 유지하는 페이스북 같은 웹 사이트에서 사용한다.
-. 페이스북이든 네이버든 웹 브라우저로 접속한 후 웹 개발 도구를 열고 우측 상단의 저장소를 클릭하면 쿠키를 확인 할 수 있다.
# 01. 쿠키의 생성
쿠키는 각각의 속성을 다음과 같은 문자열에 넣어 document 객체의 cookie 속성에 입력함으로써 생성할 수 있다.
document.cookie = "Name=Value(값);Expires=날짜;Domain=도멘인;Path=경로;Secure"; |
① Name 속성과 Value 속성
· Name과 Value 속성은 데이터를 저장하고 읽는 데 사용하는 속성이다.
· 따라서 쿠키를 사용할 때는 Name과 Value 속성을 반드시 지정해야 한다.
② Expires 속성
· Expires 속성은 쿠키의 파기 날짜를 지정하는 속성이다.
· Expires 속성에는 GMT 형식이나 UTC 형식으로 날짜를 입력해야 한다.
· 파기 날짜를 입력하지 않으면 브라우저가 종료될 때 쿠키가 삭제된다.
③ Secure 속성
· Secure 속성을 지정하면 해당 쿠키는 SSL을 사용해서만 요청할 수 있다.
④ Domain 속성
· Domain 속성을 입력하지 않으면 현재 도메인의 경로로 자동 입력된다.
· 페이지 요청과 비교해서 도메인의 경로와 Domain 속성이 일치하지 않으면, 쿠키에 접근하는 것을 막으므로 Domain 속성은 건드리지 않는다.
⑤ Path 속성
· Path 속성을 입력하지 않으면 현재 도메인의 경로로 자동 입력된다.
· Path 속성은 일부러 지정하는 경우가 많은데 특정 경로(폴더명)를 설정한다.
· Path 속성은 /폴더/ 로 설정되는데, 이렇게 설정한 Path 속성이 설정되면 현재 폴더 또는 현재 폴더의 하위에서 접근할 수 있다.
· Path 속성을 ' / '로 설정하면 도메인 내의 모든 곳에서 접근할 수 있다.
(쿠키의 범위를 좁게 잡을 수록 보안에는 좋다.)
# 소스코드 - 쿠키 생성
cookie_creation.php |
<html> // 변수를 선언 |
# 출력 결과 - ② 개발자 도구
-. 생성한 Name(이름)과 Value(값) 그리고 Expires(쿠키종료일)이 입력한 값으로 생성된 것을 확인 할 수 있다.
-. 특별히 작성하지 않은 Domain(도메인), Path(경로)의 값이 자동 입력된 것을 확인 할 수 있다.
# 02. 생성한 쿠키 데이터 읽어오기
위와 갖이 만드는 법을 살펴 보았고, 이제는 이렇게 만든 쿠키를 사용하는 방법에 대해서 알아보도록 하자.
쿠키는 document 객체의 cookie 속성을 출력하면 된다.
# 소스 코드
cookie_identify.php |
<html> |
# 출력 결과
위 출력 결과와 같이 저장했던 쿠키를 확인 할 수 있다.
쿠키를 저장할 때 는 여러 속성을 함께 입력했지만 쿠키를 볼 때는 위 결과값과 같이 간단한 형태가 아니다.
페이지가 분명히 새로고침 됐는데도 이전의 정보를 확인 할 수 있는 것을 알 수 있다. 쿠키는 이렇게 데이터를 지속하고 싶을 때 사용한다.
# 03. 쿠키 제거
cookie_remove.php |
<html> |
■ 쿠키 읽기
저장한 쿠키를 읽기 위해서는 document객체의 cookie 속성이 여러 쿠키를 한꺼번에 출력하므로 개별적인 쿠키를 읽으려면 약간의 복잡한 과정이 필요하다.
# 01. 테스트용 Cookie 5개 생성하기
# 소스 코드 - 한번에 5개의 쿠키 생성
cookie_five.php |
<html> |
# 출력 결과
# 02. 생성한 5개의 Cookie 중 1가지 선택 출력하기
이제 쿠키의 Value 속성을 추출해보자.
아래 예제는 Name 속성이 Name4인 쿠키의 Value 속성으로 추출한다.
우선 만들어진 문자열을 세미콜론( ; )을 사용해 분해한다.
# 소스 코드
cookie_info_output.php |
<html> // 쿠키를 추출한다. |
-. 세미콜론을 사용해 분해하면 Name=Value 형태의 문자열로 분해된다.
-. 이때 우리가 원하는 Name 속성을 가진 문자열을 찾아 필요 없는 부분을 제거하고 데이터를 추출한다.
# 출력 결과
※ 참고
웹 브라우저마다의 차이로 양끝에 공백이 발생할 수 있는데, 이때는 다음과 같은 형태로 첫 위치와 마지막 위치의 공백을 제거해서 사용한다.
cookies[i].replace(name + "=", "").replace(/^\S\S*/, "").replace(/^\S\S*$/, "") |
■ 쿠키 함수
지금까지 배운 쿠키와 관련된 모든 내용을 이용해 사용하기 쉬운 쿠키 함수를 만들어 보자.
# 01. 쿠키를 생성하는 함수
# 소스 코드
set_cookie.php |
<html> |
# 출력 결과
# 02. 쿠키를 읽어오는 함수
# 소스 코드
get_cookie.php |
<html> |
# 출력 결과
# 03. 쿠키를 삭제하는 함수
# 소스 코드
remove_cookie.php |
<html> |
# 출력 결과
연관 포스팅 : [JavaScript] Session 데이터 읽고, 쓰기
'JavaScript & jQuery > JavaScript' 카테고리의 다른 글
[JavaScript] 저장소 사용하기 (0) | 2018.09.07 |
---|---|
[JavaScript] Session 데이터 읽고, 쓰기 (0) | 2018.09.04 |
[JavaScript] 전화번호 Hyphen(-)기호 자동 삽입 (7) | 2018.08.21 |
[JavaScript] 천단위 이상의 입력값에 자동콤마( , ) 삽입 (0) | 2018.08.20 |
[JavaScript] 시간(HH:MM)만을 입력하는 텍스트 박스 (3) | 2018.08.17 |
[JavaScript] 전화번호 Hyphen(-)기호 자동 삽입[JavaScript] 전화번호 Hyphen(-)기호 자동 삽입
Posted at 2018. 8. 21. 10:04 | Posted in JavaScript & jQuery/JavaScript
■ 휴대폰 번호 하이픈(-)기호 자동 삽입
# 소스코드
<html> <head> <title>:: 휴대폰 번호 마이너스(-) 삽입 ::</title> <script> function inputPhoneNumber(obj) { var number = obj.value.replace(/[^0-9]/g, ""); var phone = ""; if(number.length < 4) { return number; } else if(number.length < 7) { phone += number.substr(0, 3); phone += "-"; phone += number.substr(3); } else if(number.length < 11) { phone += number.substr(0, 3); phone += "-"; phone += number.substr(3, 3); phone += "-"; phone += number.substr(6); } else { phone += number.substr(0, 3); phone += "-"; phone += number.substr(3, 4); phone += "-"; phone += number.substr(7); } obj.value = phone; } </script> </head> <body> <h2>휴대폰 번호를 입력해 주세요</h2> <input type="text" onKeyup="inputPhoneNumber(this);" maxlength="13" style="text-align:center;"/> </body> </html> |
# 출력결과
■ 지역번호 서울 예외처리(02)
위의 코드를 구태여 휴대폰 번호라고 굳이 지정한것은.
한국의 특수한 지역번호 사정 때문이다.
휴대폰 번호 : 010-0000-0000
전화 번호 : 031-0000-0000
위와같이 휴대폰 번호나, 전화번호나 문자열의 길이는 기본적으로 13자리로 같지만
단한가지 서울특별시만은 전화번호이 앞 지역번호가 02 두자리이기에 따로 예외 처리가 필요했다.
그래서 아래와같이 전체적으로 사용할 수 있게 코드를 수정해 보았다.
# 소스코드
<html> <head> <title>:: 전화번호 마이너스(-) 삽입 ::</title> <script> function inputTelNumber( ele ) { if( event.keyCode != 8 ) { const regExp = new RegExp( /^[0-9]{2,3}-^[0-9]{3,4}-^[0-9]{4}/g ); if( ele.value.replace( regExp, "").length != 0 ) { if( checkPhoneNum( ele.value ) == true ) { let number = ele.value.replace( /[^0-9]/g, "" ); let tel = ""; let seoul = 0; if( number.substring( 0, 2 ).indexOf( "02" ) == 0 ) { seoul = 0; } if( number.length < ( 4 - seoul) ) { return number; } else if( number.length < ( 7 - seoul ) ) { tel += number.substr( 0, (3 - seoul ) ); tel += "-"; tel += number.substr( 3 - seoul ); } else if(number.length < ( 11 - seoul ) ) { tel += number.substr( 0, ( 3 - seoul ) ); tel += "-"; tel += number.substr( ( 3 - seoul ), 3 ); tel += "-"; tel += number.substr( 6 - seoul ); } else { tel += number.substr( 0, ( 3 - seoul ) ); tel += "-"; tel += number.substr( ( 3 - seoul), 4 ); tel += "-"; tel += number.substr( 7 - seoul ); } ele.value = tel; } } } } function checkPhoneNum( number ) { const regExp = new RegExp( /^[0-9|-]*$/ ); if( regExp.test( number ) == true ) { return true; } else { return false; } } </script> </head> <body> <h2>전화 번호를 입력해 주세요</h2> <input type="text" onKeyup="inputTelNumber(this);" maxlength="13" style="text-align:center;"/> </body> </html> |
# 출력결과 - 지역번호가 서울(02)인 경우
# 출력결과 - 지역번호가 서울(02)이 아닌경우
'JavaScript & jQuery > JavaScript' 카테고리의 다른 글
[JavaScript] Session 데이터 읽고, 쓰기 (0) | 2018.09.04 |
---|---|
[JavaScript] Cookie 생성, 삭제 및 읽어오기 (4) | 2018.09.03 |
[JavaScript] 천단위 이상의 입력값에 자동콤마( , ) 삽입 (0) | 2018.08.20 |
[JavaScript] 시간(HH:MM)만을 입력하는 텍스트 박스 (3) | 2018.08.17 |
[JavaScript] 카드번호 입력폼 예제 (0) | 2018.04.18 |
[JavaScript] 천단위 이상의 입력값에 자동콤마( , ) 삽입[JavaScript] 천단위 이상의 입력값에 자동콤마( , ) 삽입
Posted at 2018. 8. 20. 18:07 | Posted in JavaScript & jQuery/JavaScript■ 천단위 이상의 입력값에 자동콤마( , ) 삽입
# 소스코드
<html> |
# 출력결과
■ 천단위 자동콤마( , ) 삽입 및 소수점 표현
# 소스코드
<html> |
# 출력결과
'JavaScript & jQuery > JavaScript' 카테고리의 다른 글
[JavaScript] Session 데이터 읽고, 쓰기 (0) | 2018.09.04 |
---|---|
[JavaScript] Cookie 생성, 삭제 및 읽어오기 (4) | 2018.09.03 |
[JavaScript] 전화번호 Hyphen(-)기호 자동 삽입 (7) | 2018.08.21 |
[JavaScript] 시간(HH:MM)만을 입력하는 텍스트 박스 (3) | 2018.08.17 |
[JavaScript] 카드번호 입력폼 예제 (0) | 2018.04.18 |
[JavaScript] 시간(HH:MM)만을 입력하는 텍스트 박스[JavaScript] 시간(HH:MM)만을 입력하는 텍스트 박스
Posted at 2018. 8. 17. 17:57 | Posted in JavaScript & jQuery/JavaScript■ 텍스트 박스에 시간 입력시 콜론(HH:MM) 자동 삽입
jQuery 캘린더와 같이 jQuery모듈들 중에도 시간을 선택하게 해주는 모듈들이 상당히 있었으나.
분단위를 세세하게 지정하기 힘든등의 무언가 마음에 들지 않는 부분들이 있어 제작하게 되었다.
HHMM 식으로 콜론없이 쭉 4개의 숫자를 자동으로 입력하면 HH:MM형식으로 숫자가 자동으로 기입되는 그런 구조이다.
# 소스코드
<html> // replace 함수를 사용하여 콜론( : )을 공백으로 치환한다. // 텍스트박스의 입력값이 4~5글자 사이가 되는 경우에만 실행한다. // isFinite함수를 사용하여 문자가 선언되었는지 확인한다. // 두 변수의 시간과 분을 합쳐 입력한 시간이 24시가 넘는지를 체크한다. // 입력한 분의 값이 60분을 넘는지 체크한다. <!-- maxlength의 값을 5로지정하여 다섯자리 이상의 값이 등록되는것을 막는다. --> <input type="text" class="timeBox" onKeyup="inputTimeColon(this);" placeholder="HH:MM" maxlength="5"/> |
# 출력결과 - 정상적인 시간을 입력한 경우
# 예외처리① - 문자를 입력한 경우
# 예외처리② - 24시를 넘긴 시간을 입력한 경우
# 예외처리③ - 60분을 넘긴 시간을 입력한 경우
'JavaScript & jQuery > JavaScript' 카테고리의 다른 글
[JavaScript] Session 데이터 읽고, 쓰기 (0) | 2018.09.04 |
---|---|
[JavaScript] Cookie 생성, 삭제 및 읽어오기 (4) | 2018.09.03 |
[JavaScript] 전화번호 Hyphen(-)기호 자동 삽입 (7) | 2018.08.21 |
[JavaScript] 천단위 이상의 입력값에 자동콤마( , ) 삽입 (0) | 2018.08.20 |
[JavaScript] 카드번호 입력폼 예제 (0) | 2018.04.18 |