본문 바로가기

실무로부터

[dev] 브라우저 저장소 ( local Storage / session Storage / cookie )

키워드 :  웹 스토리지, 로컬 스토리지, 세션 스토리지, 브라우저 쿠키, 세션로그인

[ 목적 ]

- 로그인 구현하던 중 세션로그인 부분 조사하며 알게되 사실을 정리한다.

- 로그인 부분 조사하며 알게된 사실을 정리한다. 

 

웹 스토리지 ?

ㄴ 데이터를 서버가 아닌 클라이언트에 저장하는 기능. 

ㄴ 브라우저의 쿠키와 유사하지만 5MB까지 저장할 수 있음

ㄴ서버에 반드시 데이터를 저장하지 않아도 되는 데이터의 경우 클라이언트 측에 데이터를 저장할 수 있는 기술.

브라우저에 데이터를 저장하는 방법이다.

ㄴ 로컬스토리지와 세션 스토리지 방법이 있음

ㄴ key-value 로 이루어진 데이터를 저장할 수 있다.

ㄴ 문자형 데이터만 저장, 반환한다.

[ session Storage  세션 스토리지 ]

ㄴ 각 브라우저 탭이나 창이 닫히면 삭제된다.

ㄴ 다른 브라우저, 다른 창과의 데이터가 공유되지 않는다. ( 새 창에서 접근하는 경우의 스토리지와 이전에 보고있전 창의 스토리지 내용이 다르다 ) 

ㄴ 보존기간 : 웹 페이지의 세션이 끝날 때 저장된 데이터가 삭제된다. 

 

[ local Storage 로컬 스토리지 ]

ㄴ 데이터를 브라우저에 반영구적으로 저장한다.  

ㄴ 한개의 브라우저에서 여러 탭이나 창들 끼리 데이터가 공유된다.

ㄴ 탭이나 창을 닫거나, 브라우저가 종료되어도 데이터가 유지된다. 

ㄴ 다른 브라우저에서는 스토리지 내의 데이터가 공유되지 않는다. ( 크롬으로 로그인 한 경우 사파리에서는 로그인 데이터를 이용할 수 없음.)

ㄴ 보존기간 : 사용자가 직접 삭제 명령어를 발송하거나, 브라우저의 캐시를 사용자가 직접 삭제하는 경우에 삭제된다.

ㄴ도메인마다 별도로 생성된다.

 

[ 브라우저 쿠키 ] 

ㄴ 만료 기간이 있는 클라이언트 단에 저장하는 작은 텍스트 파일 

ㄴ 서버와 클라이언트가 주고받은 내역을 기억하고 불러오는 역할 진행

ㄴ 용도 

  : id 정보 저장하여 로그인 상태 유지

  : 최근 검색정보 또는 광고추천

  : 쇼핑몰 장바구니 

  : '오늘하루 다시보지 않기'팝업창 설정

 

 

쿠키와 웹 스토리지의 차이점? 

ㄴ브라우저 쿠키는 서버와 통신할 떄 http 헤더에 포함되어 전송한다.

ㄴ서버와의 세션관리 시 사용된다.

ㄴ 웹 스토리지는 서버와 관계없이 클라이언트에서만 데이터를 관리한다.

 

 

 

JsessionId?

-톰캣 컨테이너에서 세션을 유지하기 위해 발급하는 키

 

 

세션로그인 

- https://velog.io/@sorzzzzy/Spring-Boot5-6.-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%B2%98%EB%A6%AC1-%EC%BF%A0%ED%82%A4-%EC%84%B8%EC%85%98

 

 

 


참고 

웹 스토리지에 대하여 

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

https://velog.io/@sjwngjs/JAVASCRIPT-%EC%9B%B9%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80local-storagesessionstorage-%EB%9E%80

 

쿠키에 대하여

https://velog.io/@hs0217/%EC%BF%A0%ED%82%A4-%EB%A1%9C%EC%BB%AC-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%84%B8%EC%85%98-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80

 

https://velog.io/@design0728/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%A0%80%EC%9E%A5%EC%86%8C-LocalStorage-SessionStorage-Cookie

 

 

'실무로부터' 카테고리의 다른 글

웹의 특징, 서버종류, 모바일 푸시 발송 방법  (0) 2023.09.18