로컬 스토리지, 세션스토리지 ,쿠키
✅web storage ?
웹 스토리지 는 데이터를 서버가 아닌 클라이언트에 저장 할 수 있도록 지원해주는 기능이다.
쿠키와 비슷하지만 쿠키는 4kb까지 저장공간을 가지지 못하는 반면 웹 스토리지는 약 5mb정도의 저장공간을 가질 수 있다는 부분에서 다르다고 본다.
웹 스토리지 데이터 구조는 key value 로 이루어져 있으며 데이터는 문자열로만 저장 반환한다.
- sesstionStorage를 활용해서 사용자가 '입력폼'을 입력하다가 페이지에서 벗어난 경우 백업/복구
- 글쓰기를 하다가 사용자가 창을 벗어난 경우 관련 작성하던 내용 백업/복구용
- 웹서버에 필수적으로 접근해야 하는 캐쉬용(캐쉬로 먼저 서비스 제공, 차후에 업데이트)
- 웹페이지의 개인화 설정들에 대한 저장과 제공(캐쉬로 활용)
- 현재 읽은 글의 히스토리 저장(카운팅, 읽은글 표시 등으로 활용)
- Canvas나 이미지에 대한 임시 저장 기능(base64로 변환)
- 웹페이지간 정보 전달(웹서버를 경유하지 않고 정보 로컬에 유지)
대표 적인 기능들
세션 스토리지를 활용하여 사용자가 입력품을 입력
✔️Web Storage를 사용전 브라우저의 사양 또한 확인해야 합니다.
같은 "origin"내에서만 액세스 가능합니다.
→ origin 이란?
Url 세계 http, https |호스트 .com 등의 도메인 | 포트 (80)
위 항목들을 오리진 이라 한다. 모든 항목들이 동일시 엑세스 가능하다.
그러면
✅Local Storage 는 뭘까?
로컬 스토리지는 데이터를 브라우저에 반영구적으로 저장하며
, 브라우저를 종료 후 재시작해도 데이터가 남아 있다. 또한 다른 창 과 브라우저를 통해서 접근이 가능하다.
자바스크립트를 통해 로컬 스토리지에 데이터를 저장할 수 있다.
개발자 도구 어플리케이션 - 로컬 스토리지에서 데이터를 확인 할 수 있다.
데이터를 객체 또는 배열로 사용하고 싶다면 JSON 방식으로 사용해야한다.
localStorage.setItem("item4", JSON.stringify({name: "300", age: "26"}));
console.log(JSON.parse(localStorage.getItem("item4")));
삭제 가능하다.
localStorage.removeItem("item4');//key를 사용한 삭제
localStorage.clear();// 전체삭제
로컬 스토리지 데이터는 삭제 해주지 않으면 계속 남아 있기 때문에 불 필요한 데이터는 직접 삭제해야하는 점
✅Session Storage 세션 스토리지 란?
기본적으로 사용하는 로컬 스토리지 부분을 세션 스토리지로 변경하면 된다.
세션 스토리지는 브라우저가 닫히면 데이터는 사라지게 되며
다른창과 브라우저로의 데이터 공유 또한 불가능하다.
🍪쿠키?
쿠키는 일반적으로 서버와 통신할때 HTTP헤더에 포함되어 전송되고, 서버측에서도 설정 할 수 있습니다.따라서 서버와의 세션관리 등에 사용됩니다.
- 종류
- Persistent/Permanent Cookie
- Session Cookie
🍪쿠키 이용 예
- 자동로그인 설정
- 팝업에서 "오늘 더 이상 이 창을 보지 않음" 설정
- 쇼핑몰 장바구니 등
🍪쿠키 이용 과정
- 브라우저(클라이언트)에서 웹페이지에 접속 시도 (서버에 요청)
- HTTP 헤더를 통해 해당 서버에서 쿠키 값을 응답으로 보낸다
- 클라이언트는 해당 쿠키를 저장한다
- 클라이언트가 해당 서버에 재요청할 때, 쿠키 정보도 같이 HTTP 헤더에 담아서 전달한다
- 서버는 클라이언트의 요청에서 쿠키값을 참고하여 비즈니스 로직을 수행한다
- 예: 로그인 상태 유지
✅각 유형의 데이터를 어디에 저장하면 좋을까?
- 자동 로그인 -> 로컬스토리지
- 입력 폼 정보 -> 세션스토리지
- 비로그인 장바구니 -> 세션스토리지
- 다시 보지 않음 팝업 창 -> 쿠키
✅값 가져오는 법
1. 로컬 스토리지
- localStorage.A (Key == A)
- localStorage.getItem("A")
2. 세션 스토리지
- sessionStorage.A (Key == A)
- sessionStorage.getItem("A")
3. 쿠키
- getCookie("A") (Key == A)