브라우저 저장소(local storage, session storage, cookie)

브라우저 저장소란?

브라우저 저장소는 웹 애플리케이션에서 데이터를 저장하기 위한 방법으로, 주로 사용자의 프로필 정보, 로그인 상태, 사용자 환경 설정 등을 저장하고 유지하는 데 사용된다.

브라우저 저장소는 HTML5부터 지원되며, JavaScript를 사용하여 사용자의 로컬 브라우저에 데이터를 저장할 수 있다.

대표적으로 로컬 스토리지, 세션 스토리지, 쿠키가 있다.

---

로컬 스토리지(Local Storage)

• 일반적으로 키-값 쌍으로 구조화된 방식으로 데이터를 저장한다.
• 로컬 스토리지는 브라우저 내부에 데이터를 저장할 수 있는 영구 저장소다.
• 데이터는 클라이언트 측 컴퓨터에 저장되며 데이터를 수동으로 지우지 않는 이상 영구적으로 보관이 가능하다.
• 사용자가 웹 사이트를 나가더라도 데이터가 유지된다.
• 저장된 데이터는 동일한 도메인에서만 접근이 가능하다.
• 주로 사용자가 선호하는 테마, 언어, 로그인 정보 등을 저장하기에 적합하다.

localStorage.setItem("key", value); 	// 키에 데이터 쓰기
localStorage.getItem("key"); 		// 키로 부터 데이터 읽기
localStorage.removeItem("key"); 	// 키의 데이터 삭제
localStorage.clear(); 			// 모든 키의 데이터 삭제
localStorage.length; 			// 저장된 키/값 쌍의 개수

// 사용자가 메모를 만들고 저장할 수 있는 웹 사이트

// To save a note:
const note = "This is my note";
localStorage.setItem("note1", note);

// To retrieve the note:
const retrievedNote = localStorage.getItem("note1");
console.log(retrievedNote); // Outputs: "This is my note"

 

세션 스토리지(Session Storage)

• 일반적으로 키-값 쌍으로 구조화된 방식으로 데이터를 저장한다.
• 세션 스토리지는 로컬 스토리지와 매우 유사하지만, 데이터가 브라우저 창이 닫힐 때 자동으로 삭제된다. 세션 스토리지는 사용자가 웹 사이트에 있는 동안에만 필요한 임시 데이터를 저장하는 데 사용된다.
• 사용자가 웹 사이트를 다시 방문하면 새로운 세션이 시작되며, 이전 세션에서 저장된 데이터는 사용할 수 없다.
• 주로 사용자의 장바구니, 쇼핑 카트 등을 저장하기에 적합하다.

sessionStorage.setItem("key", value); 	// 키에 데이터 쓰기
sessionStorage.getItem("key"); 		// 키로 부터 데이터 읽기
sessionStorage.removeItem("key"); 	// 키의 데이터 삭제
sessionStorage.clear(); 		// 모든 키의 데이터 삭제
sessionStorage.length; 			// 저장된 키/값 쌍의 개수

// 사용자가 항목을 만들고 장바구니에 저장할 수 있는 웹 사이트

// To save an item to the cart:
const item = { name: "T-shirt", price: 20 };
sessionStorage.setItem("cartItem1", JSON.stringify(item));

// To retrieve the item from the cart:
const retrievedItem = JSON.parse(sessionStorage.getItem("cartItem1"));
console.log(retrievedItem); // Outputs: { name: "T-shirt", price: 20 }

 

쿠키(Cookie)

• 쿠키는 웹사이트에서 사용자의 브라우저에 저장하는 작은 데이터 조각이다. 즉, 사용자의 로컬 컴퓨터에 저장되는 작은 텍스트 파일이다.
• 사용자가 웹사이트를 방문할 때 생성되고, 브라우저에 저장된다. 이후 사용자가 같은 웹사이트를 다시 방문할 때, 해당 웹사이트는 브라우저를 통해 쿠키에 저장된 정보를 읽어올 수 있다.
• 사용자가 웹 사이트에서 로그인 정보, 사용자 이름, 비밀번호 등을 저장하는 데 사용된다.
• 쿠키는 브라우저의 보안 및 개인 정보 보호 설정에 따라 지워질 수 있다.
• 쿠키는 로컬 스토리지나 세션 스토리지에 비해 용량 제한이 작지만, 서버 전송이 가능하다.
• 쿠키는 일반적으로 이름, 값, 만료 날짜, 경로, 도메인 등의 정보를 포함한다.
• 쿠키는 웹 사이트가 선호하는 언어 및 위치 정보, 광고 타겟팅 등 다양한 용도로도 사용된다. 또한 사용자의 방문 기록을 추적하거나, 타겟 광고를 제공하기 위한 정보를 수집하는 데에도 사용될 수 있다. 이러한 이유로, 쿠키는 개인 정보 보호와 관련한 문제가 제기된다.
• 쿠키는 다른 도메인에서도 접근이 가능하므로 보안성이 낮다.

// 웹 사이트의 로그인 시스템 - 사용자 이름, 고유한 세션 ID 등의 정보 포함
Name: login_cookie
Value: {username: "example_user", session_id: "abc123"}
Expires: 30 days from now

---

local storage vs session storage vs cookie

구분	local storage	session storage	cookie
저장 위치	클라이언트 브라우저	클라이언트 브라우저	클라이언트 브라우저
용량	5MB	5MB	4KB
만료 시간	만료 기간을 설정할 수 있음	브라우저 종료시 삭제	만료 기간을 설정할 수 있음
서버 전송 여부	X	X	O
보안성	다른 도메인에서 접근 불가능	다른 도메인에서 접근 불가능	다른 도메인에서 접근 가능
사용 예시	로그인 정보, 사용자 설정 등 장기간 보관해야 하는 정보	장바구니 등의 일시적인 정보	사용자 행동 분석, 광고 등 서버와 연동하여 사용하는 정보

 

 

---

출처

https://www.loginradius.com/blog/engineering/guest-post/local-storage-vs-session-storage-vs-cookies/

https://blog.javascripttoday.com/blog/cookies-vs-local-storage-vs-session-storage/

https://www.daleseo.com/js-web-storage/