728x90
목차
017
쿠키 (Cookie)
- 쿠키와 로컬스토리지의 type은 string으로 표시된다.
- 쿠키값이 없을 경우의 type은 undefined로 확인된다.
- 사용자가 일부러 쿠키 값을 없애거나 지정된 쿠키 시간이 종료되면 쿠키값이 사라진다.
let popupEvent = document.querySelector('.event-btn');
popupEvent.addEventListener("click",function(){
setCookie("event-popup",true,10);
})
console.log(typeof getCookie("event-popup"))
//태그 popupEvent가 가리키는 버튼을 클릭하기 전: undefined
//태그 popupEvent가 가리키는 버튼을 클릭한 후: string
document.cookie
- html에 관련된 쿠키를 읽거나 쓸 수 있다.
- key = value 의 방법을 사용하면 한 번에 하나의 쿠키만 설정하거나 업데이트 할 수 있다.
//새 쿠키 쓰기
//key = value
document.cookie = newCookie;
setCookie / getCookie
setCookie(name, value, options)
- 현재 경로(path=/)를 기본으로, 주어진 name과 value를 가진 쿠키를 설정(다른 기본값을 추가할 수 있다)
getCookie(name)
- 주어진 name의 쿠키를 반환한다.
toUTCString
- 날짜를 문자열로 변환하여 UTC 시단대로 해석한다.
- 반환값은 Www, dd Mmm yyyy hh:mm:ss GMT 형식으로 표현된다.
- Www: 요일, 세 글자로 표현 예) Sun, Mon
- dd: 일단위, 필요한 경우 선두가 0인 두 자리 숫자로 표현 예) 06, 31
- Mmm: 달, 세 글자로 표현 예) Jan, Feb
- yyyy: 연도, 필요한 경우 선행 0 이 포함된 네 자리 이상의 숫자로 표현
- hh: 시간, 필요한 경우 선두가 0인 두 자리 숫자로 표현
- mm: 분, 필요한 경우 선두가 0인 두 자리 숫자로 표현
- ss: 초, 필요한 경우 선두가 0인 두 자리 숫자로 표현
trim( )
- 문자열 양 끝의 공백을 제거하고 원본 문자열을 수정하지 않고 새로운 문자열을 반환다.
- 공백이란, 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR 등)를 의미한다.
- 블록 끝의 블록만 제거한 새로운 문자열을 반환하려면 trimStart()또는 trimEnd()사용
- trimStart(): 문자열 시작부분의 공백을 제거
- trimLeft()라는 별칭으로 호출이 가능
- trimEnd(): 문자열 끝부분의 공백을 제거
- trimRight() 라는 별칭으로 호출이 가능
- trimStart(): 문자열 시작부분의 공백을 제거
startsWith()
- 특정 문자열이 특정 문자로 시작되는지 확인하여 결과 값을 true로 반환하거나, false로 반환한다.
- startsWith(searchString, position)
- searchString(첫 번째 매개변수): 문자열의 시작점에서 탐색할 문자열.
- position(두 번째 매개변수): searchString을 탐색할 위치이다. (인덱스 값)
const str1 = 'Saturday night plans';
console.log(str1.startsWith('Sat'));
//결과: true
console.log(str1.startsWith('Sat', 3));
//결과: false
console.log(str1.startsWith('night', 9));
//결과: true
setInterval()
- 주기적으로 인자를 실행하는 함수이다.
- 함수 호출을 중단하려면 clearInterval()을 사용하면 된다.
//Hello!라는 문자열을 콘솔에 3초에 1번씩 실행합니다.
function test() {
console.log("Hello!");
}
setInterval(test, 3000);
clearInterval()
- 현재 진행되고 있는 함수의 진행을 멈추는데 사용한다.
// 2초 간격으로 메시지를 보여줌
let timerId = setInterval(() => alert('째깍'), 2000);
// 5초 후에 정지
setTimeout(() => { clearInterval(timerId); alert('정지'); }, 5000);
👩🏫예시_쿠키 생성 팝업창
- 팝업창에 있는 클릭 버튼을 click하면 지속시간이 10초인 쿠키 생성.
- 새로고침하면 열려있던 팝업창이 없어지고 쿠키의 남은 시간을 html에서 확인할 수 있다.
- 쿠키의 지속시간이 종료되고 다시 새로고침을 누르면 이전에 보였던 팝업창이 다시 생기게 된다.
//HTML의 span태그의 클래스인 popup-btn을 가리킴 (팝업창 내 우측상단 X)
let popupBtn = document.querySelector(".popup-btn");
//HTML의 button태그의 클래스인 event-btn을 가리킴 (팝업창 내 좌측 상단 '클릭'버튼)
let popupEvent = document.querySelector('.event-btn');
//setCookie로 생성된 쿠키 event-popup을 가리킨다.(쿠키의 유지시간을 지정하는 쿠키)
let popupCookie = getCookie("event-popup");
function popupOpen(){ // 함수 popupOpen 선언. 팝업창의 노출여부를 결정하는 함수
//팝업창을 감싸는 div영역인 popup-wrap을 가리킴
let popup = document.querySelector('.popup-wrap');
//'is-on'클래스를 생성하여 is-on의 유무에 따라 팝업창 노출, 비노출 실행진행
//변수popup이 가리키는 태그의 클래스에 'is-on'이 있으면 참, 없으면 거짓
if(popup.classList.contains("is-on")){
//변수 popup에 클래스'is-on'이 있으면 클래스를 지워 비노출로 변경한다.
popup.classList.remove('is-on');
}else{
//변수 popup에 클래스'is-on'이 없으면 클래스를 추가해 노출로 변경한다.
popup.classList.add('is-on');
}
}
//태그 popupBtn의 이벤트 구독. popupBtn를 click하면 함수 popupOpen 실행
//팝업창 내 X 버튼을 클릭하면 is-on class가 지워지며 팝업창이 사라진다.
popupBtn.addEventListener("click",popupOpen);
//태그 popupEvent의 이벤트 구독. popupEvent를 click하면 익명함수 실행
popupEvent.addEventListener("click",function(){
console.log('이벤트');
// setCookie('설정할 이름',설정할 값, 설정할 기간)
// setCookie를 이용하여 쿠키 추가
// event-popup이라는 이름의 쿠기 생성. 이 쿠키는 true 값을 가지고 10초의 시간을 갖는다.
setCookie("event-popup",true,10);
})
/* popupEvent태그를 눌러서 popupEvent의 익명함수가 실행되면 실행되기 전에는
undefined 타입이었지만, 실행 후에는 string으로 변경되어 표시된다.
따라서, event-popup의 타입은 string이다.*/
// 쿠키, 로컬스토리지 둘 다 문자로 저장된다.
// 코딩을하면서 데이터를 저장할때 문자열로 저장한다.
console.log(typeof getCookie("event-popup"))
// 하루동안 팝업 안보이기
/* 쿠키값이 없다 == undefined. 사용자가 일부러 쿠키값을 없애거나,
event-popup에서 지정된 쿠키시간이 종료되면 쿠키값이 사라진다. */
// 쿠키값이 없으면 popupOpen함수가 작동하여 팝업이 뜨도록 한다.
if(popupCookie == undefined)
{
popupOpen();
}
// 함수 getCookie 선언. (인터넷에서 불러옴)
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
// 함수 setCookie 선언.
function setCookie(c_name,value,time){
/*변수 date선언.
new Date에 매개변수를 제공하지 않으면 생성한 순간의 날짜와 시간을 나타내는
Date 객체를 생성한다. */
let date = new Date();
/* popupEvent 클릭 시 동작하는 익명함수에서의 선언문 setCookie("event-popup",true,10);
'date.setTime'에 'date.getTime()'으로 'event-popup'을 받고,
'value'값을 'true'로 받고 'time'값을 '10'으로 받는다. */
/* 따라서, 'date.setTime'은 'event-popup'으로 값을 받고, 지속시간(1000 == 1초)은
'10 * 1000'이므로 10초 동안의 지속시간이 주어진다. */
date.setTime(date.getTime() + time * 1000);
let str = c_name+"="+value+";expires="+date.toUTCString()+";path=/";
let str2 = getCookieTime(str);
// 문자열로 데이터를 저장하는데
// 값이 여러개일경우
// 배열이라던지 객체를 사용
// 여러가지의 값을 사용해야하기때문에 객체의 모양으로 문자열을 전달하고
// 문자열을 받아서 객체로 변환하여 사용하자.
console.log(getCookieTime(c_name+"="+value+";expires="+date.toUTCString()+";path=/"));
document.cookie = c_name+"="+`{"value" : "${value}", "time" : "${str2}"}`+";expires="+date.toUTCString()+";path=/"
let value2 = getCookie("event-popup");
console.log(JSON.parse(value2));
}
//함수 getCookieTime 선언. 'setCookie'쿠키 내에서 매개변수를 받아 실행된다.
function getCookieTime(cookie){
// 지역변수 str선언. 쿠키 문자열을 받아서 ';'부분마다 잘라 배열로 변환
let str = cookie.split(';');
let str2 = str.find(function(i){
let temp = i.trim();
return temp.startsWith('expires=');
})
if(str2){
let str3 = str2.trim();
console.log(str3);
// 쿠키의 시간을 받아서 시간의 정보들을 다루는
// Date객체를 만들어줬다.
return new Date(str3);
}else{
return null;
}
}
// trim 메소드 : 문자열 양끝의 공백을 제거
let a = " a b ";
console.log(a);
console.log(a.trim());
// startsWith 메소드 : 해당 문자로 시작하는지 여부
// 매개변수로 시작하는 문자열 전달해주면 된다.
let b = "abcd";
console.log(b.startsWith("abc"))
// 시간의 차이를 구해서 값을 받아보자
// 밀리초를 받아서 시간이 얼마나 남은건지 확인하는 함수
// 시간계산을 할때 언제 시간이 만료되는지 알고있으면 되는거죠?
// 지금 시간의 정보를 가지고있는 Date객체를 만들어서
// 미래 시간의 밀리초와 지금 만든 Date객체의 밀리초를 빼면
// 차이값이 나오는데 그 차이값(밀리초)를 가지고 날짜와 시간과 분,초 이렇게 나타내주기만 하면 된다.
// times함수로 밀리초를 가지고 날짜 시간 분 초가 얼마나 남은건지.
let dateTemp = 1000;
// 비동기 함수 setTimeout이 함수는 매개변수로 전달한 시간이후에 실행되는 함수.
// setTimeout(() => {
// // 1초뒤에 실행
// }, 1000);
// 비동기 함수
// 매초마다 동작하는 함수를 만들어보자
// 정한 시간마다 동작하는 함수
// 매개변수로 전달한 시간마다 동작한다.
// let date1 = new Date();
// date1.setTime(date1.getTime() + 100000);
// let time = JSON.parse(popupCookie).time;
// let date = new Date(time);
//console.log(date);
// setInterval 제거 방법
let setTime = setInterval(() => {
let date2 = new Date();
// // 값이 들어온것 객체가 아니고
// let time = date1.getTime() - date2.getTime();
// // 1초마다 실행
// times(time);
let timeTag = document.querySelector('.popup-time');
if(popupCookie != undefined)
{
let time = JSON.parse(popupCookie).time;
let date = new Date(time);
console.log(date);
console.log(date2);
console.log(popupTime(date,date2));
timeTag.innerHTML = times(popupTime(date, date2));
}else{
timeTag.innerHTML = "시간끝";
}
}, 1000);
function popupTime(date1,date2) {
return date1.getTime() - date2.getTime();
}
function times(time){
// let sec = Math.floor(time / (24*60*60*1000));
// let min = Math.floor(time / (60*60*1000));
// console.log(min);
let day = Math.floor(time / (24 * 60 * 60 * 1000));
// 받아온 시간에서 날짜가 하루 단위가 있으면 나눠서 값을 넣어주고
// 일단위를 빼고
time %= (24 * 60 * 60 *1000);
let hour = Math.floor(time / (60 * 60 * 1000));
// 시간단위를 빼고
time %= (60 * 60 * 1000);
let min = Math.floor(time /(60 * 1000));
// 분단위를 다빼고
time %= (60 * 1000)
// 남은 초
let sec = Math.floor(time / 1000);
console.log(day);
console.log(hour);
console.log(min);
console.log(sec);
if(time < 0)
{
// 지울 Interval 함수 매개변수로 전달하면된다.
clearInterval(setTime);
let timeTag = document.querySelector('.popup-time');
timeTag.innerHTML = "";
}
return `${day}일 ${hour}시 ${min}분 ${sec}초`;
}
//
더보기
728x90
