개발자도구 session

사이트마다 다르다
1. 로컬 스토리지, 세션 스토리지, 쿠키의 차이점

• 쿠키의 단점을 보완하기 위해서 HTML5 에서 웹스토리지라는 기술이 탄생했다.
• 웹 스토리지는 Key와 Value 형태로 이루어져있다. [key: value]

***자바스크립트 객체 ***
let object = {
	"A" : 1,
	"B" : 2,
	"name" : "wecode",
	"Key" : "Value"
}

파이썬의 dictionary

• 웹 스토리지에는 로컬 스토리지와 세션 스토리지가 있다.

• 웹 스토리지란 크롬과 같은 브라우저에서 자그맣게 저장소를 만들어놔서 사용자가 따로 매번 서버에서 데이터를 받아오지 않아도 되게 도와주는 역할을 한다.

• 웹 스토리지는 로컬(브라우저)에만 정보를 저장하고, 쿠키는 서버와 로컬에 정보를 저장한다.

• 쿠키에 저장되는 정보들은 서버와 연동해서 갖고오고 보내주고 해야한다.

• 또한 쿠키는 저장되는 기한을 정할 수 있다. 즉, 마감기한 있는 저장소이다.

• 예시) 하루동안 창 보지 않기, 7일동안 창 보지 않기

• 그 정보를 쿠키에 저장해다가 시간이 지나면 다시 활성해주는 것이다.
  
  

• 로컬 스토리지와 세션 스토리지는 데이터의 영구성에서 차이가 난다.

• 로컬 스토리지는 클라이언트(사용자)에 대한 정보를 영구적으로 저장한다.

  • ex) 자동 로그인 저장

• 세션 스토리지는 세션 종료 시(브라우저 닫을 시), 클라이언트(사용자)에 대한 정보가 삭제된다.

  • ex) 비로그인 시 장바구니
    
    

• 로컬 스토리지와 세션 스토리지의 장점 (1) : 서버에 불필요한 데이터를 저장하지 않는다.

• 로컬 스토리지와 세션 스토리지의 장점 (2) : 용량이 크다. (약 5MB, 브라우저마다 차이가 존재한다.

• 로컬 스토리지와 세션 스토리지의 단점 : HTML5를 지원하지 않는 브라우저는 사용 붉능
  
  

• 쿠키의 장점 : 대부분의 브라우저가 지원한다.

• 쿠키의 단점 (1) : HTTP요청마다(페이지 전환할때마다) 서버에 전달되다보니 서버에 부담이 된다.

• 쿠키의 단점 (2) : 용량이 작다 (약 4kb)

• 쿠키의 단점 (3) : 암호화가 존재하지 않는다 -> 매 요청마다 서버를 오가는데 사용자 정보 도난 위험이 있다.

  
  
  

2. 각 예 - 어떤 유형의 데이터를 어디에 저장하면 좋을까?

• 기본적으로 사이트 바이 사이트
• 쿠키는 서버 사이드, 웹스토리지는 클라이언트 사이드
• 자동 로그인 : 로컬 스토리지
• 비로그인 장바구니, 은행 사이트(보안 중요, 바로 삭제) : 세션 스토리지
• 다시 보지 않음 팝업 창 : 쿠키

3. 스토리지 접근해서 값 갖고오는 법

   1. 로컬 스토리지
      • localStorage.A (Key == A)
      • localStorage.getItem("A")
   2. 세션 스토리지
      • sessionStorage.A (Key == A)
      • sessionStorage.getItem("A")
   3. 쿠키
      • getCookie("A") (Key == A)

4. 세팅하는 법

   1. 로컬 스토리지
      • localStorage.A = 1 (Key == A, Value = 1)
      • localStorage.setItem("A", 1)
   2. 세션 스토리지
      • sessionStorage.A = 1 (Key == A, Value = 1)
      • sessionStorage.setItem("A", 1)
   3. 쿠키
      • setCookie("A", 1, 7) (Key == A, Value == 1, 유효기간 == 7일)