쿠키
쿠키-브라우저에서 관리
세션-서버에서 관리
document.cookie="키; 발행처; expires=UTCString";
JS에서 쿠키는 다 문자열로 표현.
키는 키=값;의 형태로
path=/; 생략도 가능.
expires=UTCString은 만료시간
동일한 이름의 쿠키는 덮어씌워짐에 주의. map과 같다.
;와 띄어쓰기가 반드시 들어간다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
쿠키이름: <input type="text" id="cookieName"><br>
쿠키벨류: <input type="text" id="cookieValue"><br>
<button id="btn">쿠키만들기</button>
<script>
//document.cookie="키=값";
// document.cookie="키=값; expires=UTC스트링타입";
/*
var date=new Date();
date.setMinutes(date.getMinutes()+1); //현재시간으로부터 1분 뒤
document.cookie="키=값; path=/; expires="+date.toUTCString();
*/
var cookieName=document.getElementById("cookieName");
var cookieValue=document.getElementById("cookieValue");
var btn = document.getElementById("btn");
btn.onclick=function(){
var date=new Date();
date.setHours(date.getHours()+1);//지금으로부터 1시간 뒤
document.cookie=cookieName.value+"="+cookieValue.value+"; path=/; expires="+ date.toUTCString();
}
</script>
</body>
</html>
쿠키를 사용하는 방법은 개발자마다 다르다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>1번페이지에서 만든 쿠키 사용하기</h3>
<input type="text" id="findCookie">
<button id="btn">찾을쿠키명</button>
<script>
//console.log(document.cookie);
var findCookie=document.getElementById("findCookie");
var btn =document.getElementById("btn");
btn.onclick=function(){
var arr=document.cookie.split("; ");
//console.log(arr);
//반복을 이용해서 쿠키를 찾음
for( var i in arr){
var find = findCookie.value;
if(arr[i].indexOf(find) !=-1){//입력한 값이 있다면
// console.log('쿠키있음');
var value=arr[i].replaceAll(" ","").replace(find+"=","");//값. arr[i].replaceAll(" ","").split("=")[1]과 같다.
console.log("키:"+find);
console.log("값:"+value);
}
}
}
</script>
</body>
</html>
console.log(document.cookie);를 하면 키=값의 형태로, 문자열로 나온다!
'JS' 카테고리의 다른 글
| 230105 JS 쿠키실습 (0) | 2023.01.05 |
|---|---|
| 230105 JS 로컬스토리지 (0) | 2023.01.05 |
| 230105 JS navigator객체2, 콜백함수 (0) | 2023.01.05 |
| 230105 JS navigator객체 (0) | 2023.01.05 |
| 230105 JS history객체 (0) | 2023.01.05 |
