Local Storage
(Client-side_ 해킹 위험) 사용자의 브라우저에 저장
사용자가 지우지 않는 이상 데이터가 그 컴퓨터의 브라우저에 저장되어 있음 (데이터의 영구성 보장)
도메인마다 별도로 local storage가 생성됨
ex)
지속적으로 필요한 데이터 (자동 로그인, scores in games 등)
UI 정보들 (검색하면 데이터 유지함. airbnb, skyscanner 등)
Session Storage
cookie is deleted when the tab or window is closed
(Client-side_ 해킹 위험) 브라우저 탭이나 윈도우를 닫을 경우 제거됨 (새로고침은 데이터 유지)
데이터가 서버로 전송되지 않음
저장 용량 한도(5MB 이상) > cookie
ex) 잠깐 동안만 필요한 정보, 예민한 유저 정보 (일회성 로그인, 은행 등)
📌 client-side storage
localStorage && Session Storage
(relatively new APIs)
reducing the amount of traffic between client and server.
❌ sensitive or security-related data ❌
Cookie
(Server-side) 만료 기한이 있는 KEY-VALUE 저장소
The data is sent back to the server for every HTTP request
쿠키 데이터는 서버로 전송되므로 하나의 도메인 페이지에서 최대 20개, 4KB 용량 제한 있음
ex)
서비스에 직접적이지 않은 데이터 (서비스 약관 등)
Web Storage 사용 방법
-
데이터 저장
localStorage.setItem("key", "value")
sessionStorage.setItem("key", "value") -
데이터 접근
localStorage.getItem("key")
sessionStorage.getItem("key") -
기타 메소드
removeItem, clear
setcookie("key", "value", "지속시간 (초단위)")
reference:
https://velog.io/@hyounglee/DevTools
https://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies
