⛳️ 인프런 - cs 지식의 정석 강의를 듣고 학습한 내용입니다.
1. 로컬스토리지
개념
로컬스토리지는 브라우저 내에서 데이터를 { key: value } 형태로 저장할 수 있는 웹 스토리지 객체이다. 오리진(origin)에 종속적이며, 동일한 오리진 내에서는 모든 브라우저 탭에서 공유된다.
오리진
: 프로토콜, 도메인, 포트번호를 합한 부분을 말함. (예: https://www.naver.com:443)
특징
- 하나의 키에는 하나의 값만 저장 가능
- 만료 날짜가 없음: 사용자가 직접 삭제하지 않는 한 데이터가 유지됨
- 최대 저장 용량: 5MB
- 서버로 자동 전송되지 않으며, 클라이언트 측에서만 사용
- 주로 로그인 상태 유지, 사용자 환경 설정 등을 저장하는 데 사용됨
javascript 사용 예시
// 데이터 저장
localStorage.setItem("key", "value");
// 데이터 가져오기
const value = localStorage.getItem("key");
console.log(value); // "value"
// 데이터 제거
localStorage.removeItem("key");
// 모든 데이터 제거
localStorage.clear();html 로컬스토리지 활용 사례: 입력값 캐싱
로컬스토리지를 이용해 UX를 개선하는 간단한 예시 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로컬스토리지 활용</title>
<style>
/* CSS */
.button {
background-color: #EF4765;
border: none;
border-radius: 5px;
color: white;
padding: 10px 20px;
margin: 5px;
cursor: pointer;
}
#field {
font-size: 20px;
padding: 5px;
}
</style>
</head>
<body>
<div>
<input type="text" id="field" placeholder="값을 입력하세요">
<button class="button" id="save">저장</button>
<button class="button" id="read">조회</button>
<button class="button" id="clear">삭제</button>
</div>
<script>
// 로컬스토리지 활용 코드
window.onload = () => {
const field = document.getElementById("field");
const save = document.getElementById("save");
const read = document.getElementById("read");
const clear = document.getElementById("clear");
// 저장 버튼
save.addEventListener("click", () => {
localStorage.setItem("입력값", field.value);
alert("저장되었습니다!");
});
// 조회 버튼
read.addEventListener("click", () => {
const savedValue = localStorage.getItem("입력값");
alert(`저장된 값: ${savedValue || "값이 없습니다."}`);
});
// 삭제 버튼
clear.addEventListener("click", () => {
localStorage.removeItem("입력값");
field.value = "";
alert("삭제되었습니다!");
});
// 페이지 로드 시 저장된 값 복원
if (localStorage.getItem("입력값")) {
field.value = localStorage.getItem("입력값");
}
};
</script>
</body>
</html>2. 세션스토리지
개념
세션스토리지는 로컬스토리지와 유사한 웹 스토리지 객체로, 데이터를 { key: value } 형태로 저장된다. 그러나 브라우저 탭마다 독립적으로 작동하며, 브라우저 탭을 닫으면 데이터가 소멸된다는 차이가 있음
특징
- 하나의 키에는 하나의 값만 저장 가능
- 최대 저장 용량: 5MB
- 데이터는 브라우저 탭을 닫으면 삭제됨
- 동일 오리진 내에서도 각 탭마다 저장소가 독립적
javascript 예시 코드
// 데이터 저장
sessionStorage.setItem("key", "value");
// 데이터 가져오기
const value = sessionStorage.getItem("key");
console.log(value); // "value"
// 데이터 제거
sessionStorage.removeItem("key");
// 모든 데이터 제거
sessionStorage.clear();3. 쿠키
개념
쿠키는 클라이언트와 서버 간에 데이터를 저장하고 전달하기 위한 브라우저 저장소로, HTTP 요청/응답의 헤더에 포함되어 자동으로 서버에 전송되고 브라우저에도 저장된다.
특징
- 저장 용량: 4KB
- 만료 날짜 설정 가능
- 클라이언트와 서버 모두 제어 가능
- 주로 로그인 상태 유지, 장바구니, 사용자 맞춤 광고에 사용
서버에서 먼저 설정할 수도 있고 클라이언트에서 먼저 설정할 수도 있으나,
서버에서 먼저 설정해서 쿠키를 만드는게 일반적이다.
종류
- 세션 쿠키: Expires 또는 Max-Age 속성을 지정하지 않은 쿠키로, 브라우저가 종료되면 쿠키도 사라진다.
- 영구 쿠키: Expires 또는 Max-Age 속성을 지정해 특정 날짜 또는 일정 기간이 지나면 삭제되도록 만든 쿠키로, 브라우저를 닫아도 만료되지 않는다.
쿠키 설정 문법 코드
Set-Cookie: <cookie-name>=<cookie-value>
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<non-zero-digit>
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>
Set-Cookie: <cookie-name>=<cookie-value>; Path=<path-value>
Set-Cookie: <cookie-name>=<cookie-value>; Secure
Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly
Set-Cookie: <cookie-name>=<cookie-value>; SameSite=Strict
- Secure: https로만 쿠키를 주고받을 수 있게 하는 옵션. 하지만 Chrome v89 또는 Firefox v75 이상의 localhost에서는 이 사양이 무시된다.
- httponly: 공격자가 쿠키를 자바스크립트로 빼낼 수 없게 만든다. (document.cookie로 접근 불가능)
- samesite: 요청이 동일한 도메인에서 시작된 경우에만 쿠키가 애플리케이션으로 전송되도록 허용한다.
서버에서 쿠키 설정하는 javascript 예시 코드
const http = require('http');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((req, res) => {
res.setHeader('Content-Type', 'text/plain; charset=utf-8');
res.setHeader('Set-Cookie', ['kundol = amumu; httponly',
'loltier = master; Secure']);
res.end('큰돌, 그는 신인가?!\n');
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});로컬스토리지, 세션스토리지, 쿠키 비교정리
공통점
- 브라우저에 캐싱을 함으로써 서버에 대한 요청을 줄이고 서버 부하를 방지한다.
- 캐싱으로 인해 다운로드하는 컨텐츠가 줄어들어 웹사이트의 컨텐츠를 더 빨리 다운로드할 수 있다.
- 사이트 기본 설정 커마를 저장하거나 로그인 상태를 유지할 때 사용될 수 있다.
차이점
| 특성 | 로컬스토리지 | 세션스토리지 | 쿠키 |
|---|---|---|---|
| 최대 저장 용량 | 5MB | 5MB | 4KB |
| 브라우저 탭 | 공유 | 탭마다 독립적 | 공유 |
| 데이터 유지 기간 | 영구적 | 브라우저 탭 닫으면 소멸 | 설정한 만료 기간까지 유지 |
| 자동 서버 전송 | X | X | O |
| 주요 사용 목적 | 사용자 설정, 캐싱 | 세션 데이터 | 로그인 정보, 세션 유지 |
정체되지 않는 성장