JavaScript로 Cookie에 데이터 저장하는 방법 알아보기
Cookie란 무엇인가요?
Cookie는 웹사이트에서 사용자의 브라우저에 저장하는 작은 데이터입니다.
주로 사용자 식별, 상태 유지, 그리고 맞춤화를 위해 사용되며, 다음과 같은 용도로 활용됩니다:
• 세션 관리: 로그인 정보나 장바구니에 담긴 상품 데이터를 유지.
• 개인화: 언어 설정, 테마 등 사용자가 선택한 환경을 저장.
• 트래킹: 사용자의 행동을 추적하여 분석이나 광고에 활용.
Cookie는 웹 서버 또는 JavaScript를 통해 브라우저에 저장되고, 이후 요청에서 서버로 전송됩니다.
Cookie에 데이터를 저장하는 방법
Cookie는 아래와 같은 형식으로 데이터를 저장합니다:
key=value; expires=date; path=/; domain=example.com; secure; HttpOnly;
간단히 말해 key(데이터 이름)에 value(실제 데이터)를 저장한다고 볼 수 있습니다.
각 속성은 다음과 같은 역할을 합니다:
• key=value: 저장할 데이터의 이름과 값을 나타냅니다.
예: username=JohnDoe
• expires: Cookie의 유효기간을 설정합니다. 해당 시간이 지나면 Cookie는 만료됩니다.
예: expires=Fri, 31 Dec 2024 23:59:59 GMT
• path: Cookie가 유효한 URL 경로를 지정합니다.
예: path=/ (사이트 전체에서 유효)
• domain: Cookie가 유효한 도메인을 지정합니다.
예: domain=example.com
• secure: HTTPS 통신에서만 Cookie를 전송하도록 설정합니다.
• HttpOnly: JavaScript에서 Cookie를 조작하지 못하도록 설정하여 보안을 강화합니다.
Cookie를 활용한 데이터 저장 예제
구현할 기능
JavaScript만 사용하여, 다음과 같은 간단한 기능을 구현합니다:
1. 사용자가 텍스트를 입력하고 저장 버튼을 누르면, 해당 텍스트가 Cookie에 저장됩니다.
2. 저장된 텍스트는 페이지를 새로고침해도 사라지지 않고 화면에 표시됩니다.
HTML 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cookie 데이터 저장</title>
</head>
<body>
<h1>Cookie에 데이터 저장하기</h1>
<form id="textForm">
<label for="textInput">텍스트를 입력하세요:</label><br>
<input type="text" id="textInput" required>
<button type="submit">저장</button>
</form>
<h2>저장된 데이터</h2>
<ul id="historyList"></ul>
<script src="script.js"></script>
</body>
</html>
JavaScript 코드
// Cookie에 데이터 저장
function setCookie(name, value, days) {
const date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
const expires = date.toUTCString();
document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/`;
}
// Cookie에서 데이터 가져오기
function getCookie(name) {
const cookies = document.cookie.split("; ");
for (let cookie of cookies) {
const [key, val] = cookie.split("=");
if (key === name) {
return decodeURIComponent(val).split(",");
}
}
return [];
}
// 저장된 데이터 화면에 출력
function renderHistory() {
const historyList = document.getElementById("historyList");
const history = getCookie("history").filter(Boolean);
historyList.innerHTML = "";
history.forEach(item => {
const li = document.createElement("li");
li.textContent = item;
historyList.appendChild(li);
});
}
// 폼 이벤트 처리
document.getElementById("textForm").addEventListener("submit", (e) => {
e.preventDefault();
const textInput = document.getElementById("textInput");
const newText = textInput.value.trim();
if (newText) {
const currentHistory = getCookie("history");
currentHistory.push(newText);
setCookie("history", currentHistory.join(","), 7);
renderHistory();
textInput.value = "";
}
});
// 페이지 로드 시 데이터 출력
window.onload = renderHistory;
코드 설명
• setCookie 함수:
데이터를 지정된 기간 동안 Cookie에 저장합니다.
예: setCookie("history", "example", 7);
• getCookie 함수:
특정 키(name)에 저장된 데이터를 가져옵니다. 이 예제에서는 데이터를 배열로 반환하도록 작성했습니다.
• renderHistory 함수:
Cookie에 저장된 데이터를 화면에 출력합니다.
• 폼 이벤트:
사용자가 텍스트를 입력하고 저장 버튼을 누르면, 입력값이 Cookie에 저장되고 목록에 추가됩니다.
마무리
Cookie는 웹 애플리케이션에서 데이터를 간단히 저장하고 관리하는 데 유용합니다.
하지만 민감한 데이터는 반드시 보안 설정(secure, HttpOnly)을 통해 보호해야 합니다.
이번 예제를 따라하며 Cookie 사용 방법을 익혀보세요!
'Javascript' 카테고리의 다른 글
| React 19 주요 기능 가볍게 살펴보기 (1) | 2024.12.21 |
|---|---|
| React의 Render Props 패턴을 활용한 컴포넌트 디자인 (0) | 2024.11.29 |
| JavaScript 오브젝트 메서드 완벽 이해하기: Object.entries, Object.fromEntries (0) | 2024.11.24 |
| Next.js 오류 처리에서 흔히 겪는 문제와 해결 방법 (0) | 2024.11.24 |
| TypeScript로 클래스가 아닌 것 상속하기 (0) | 2024.11.09 |