쿠키
쿠키는 브라우저에 저장되는 작은 크기의 문자열로 HTTP 프로토콜의 일부이다. HTTP 쿠키(웹 쿠키, 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각으로 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송한다. 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용된다. 이를 이용하면 상태가 없는(stateless) HTTP 프로토콜에서 상태 정보를 기억시켜주기 때문에 사용자의 로그인 상태를 유지할 수 있다.
쿠키 사용의 주목적 3가지
- 세션 관리 : 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리
- 개인화 : 사용자 선호, 테마 등의 세팅
- 트래킹 : 사용자 행동을 기록하고 분석하는 용도
쿠키 생성
document.cookie = "키=값; path=/; expires=" + date.toUTCString();
- 똑같은 이름으로 쿠키가 생성되면 만료기한이 더 짧더라도 후에 만들어진 쿠키로 덮어진다.
- toUTCString() 으로 해주는 이유는 한국뿐만 아니라 외국에서 접근하더라도 외국 시간대에 맞게 적용하기 위함이다.
쿠키 삭제 방법
- 개발자 도구 - Application - Storage - Cookies 에서 직접 삭제
- expires를 현재시간으로 설정
쿠키 생성
예시
더보기
<!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">
쿠키벨류: <input type="text" id="cookieValue">
<button id="btn">쿠키만들기</button>
<script>
/* // document.cookie = "키=값;"
// document.cookie = "키=값; expires=UTC스트링시간타입"
var date = new Date();
date.setMinutes(date.getMinutes() + 1); //지금 시간으로 부터 1분 뒤
console.log(date);
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시간 뒤
var key = cookieName.value;//사용자가 입력한 값
var val = cookieValue.value;//사용자가 입력한 값
var cookie ="";
cookie += key + "=" + val + ";";
cookie += " path=/;";
cookie += " expires=" + date.toUTCString();
document.cookie = cookie;
// document.cookie = "키=값; 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 find = findCookie.value;
var arr = document.cookie.split("; ");
console.log(arr);
//반복을 이용해서 쿠키를 찾음
for(i in arr){ //i는 인덱스
if(arr[i].indexOf(find)!=-1) {//입력한 값이 있다면
var value = arr[i].replaceAll(" ", "").replace(find+"=","");
console.log("키:" + find);
console.log("값:" + value);
}
}
}
</script>
</body>
</html>결과
세션(로컬 스토리지)
localStorage 읽기 전용 속성을 사용하면 Storage 객체에 접근할 수 있다. 저장한 데이터는 브라우저 세션 간에 공유된다. localStorage는 sessionStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고 sessionStorage의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 점이 다르다. ("사생활 보호 모드" 중 생성한 localStorage 데이터는 마지막 "사생활 보호" 탭이 닫힐 때 지워진다.)
localStorage에 저장한 자료는 페이지 프로토콜별로 구분한다. 특히 HTTP로 방문한 페이지에서 저장한 데이터는 같은 페이지의 HTTPS와는 다른 localStorage에 저장된다.
키와 값은 항상 각 문자에 2바이트를 할당하는 UTF-16 DOM String의 형태로 저장한다. 객체와 마찬가지로 정수 키는 자동으로 문자열로 변환한다.
storage 주요 함수(함수앞에 storage를 넣는건 기본)
- 생성 : .setItem(“key”, “value”);
- 조회 : .getItem(“key”); → value 값 반환
- 삭제 : .removeItem(“key”);
- 전체 삭제 : .clear();
예시
더보기
<!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>로컬 스토리지 사용하기</h3>
<button onclick="createSession();">세션만들기</button>
<button onclick="removeSession();">세션삭제하기</button>
<script>
/*
localStorage와 sessionStorage는 브라우저의 키=값 형캐로 데이터를 저장하는 브라우저 측의 세션
localStorage는 브라우저를 종료하더라도 지속
sessionStorage는 브라우저를 종료하면 사라짐
쿠키와 다른 점은?
-쿠키는 서버간 전송이 가능
-스토리지는 브라우저에서만 사용 가능
*/
// setItem(key, value) – 키-값 쌍을 보관합니다.
// getItem(key) – 키에 해당하는 값을 받아옵니다.
// removeItem(key) – 키와 해당 값을 삭제합니다.
// clear() – 모든 것을 삭제합니다.
// key(index) – 인덱스(index)에 해당하는 키를 받아옵니다.
// length – 저장된 항목의 개수를 얻습니다.
function createSession(){
//스토리지에는 순수한 문자열만 저장이됨
//rmfotj obj를 저장하려면 JSON.stringify() 치환해서 저장하면 좋음
//저장
localStorage.setItem("aaa", "홍길동");
localStorage.setItem("bbb", JSON.stringify([1,2,3]));
//사용
var aaa = localStorage.getItem("aaa");//키
var bbb = localStorage.getItem("bbb");//키
console.log(aaa);
console.log(bbb);
}
function removeSession(){
localStorage.removeItem("aaa"); //삭제
}
</script>
</body>
</html>결과
'JS > JS (자바스크립트) ES5' 카테고리의 다른 글
| JS (자바스크립트) AJAX (Asynchronous JavaScript And XML) (0) | 2023.01.07 |
|---|---|
| JS (자바스크립트) Location, History, Navigator객체 (0) | 2023.01.07 |
| JS setInterval 실습 (0) | 2023.01.04 |
| JS (자바스크립트) timeout 타임아웃 (0) | 2023.01.04 |
| JS (자바스크립트) window.Interval(인터벌) (0) | 2023.01.04 |
댓글