[브라우저] 로컬 스토리지, 세션 스토리지

로컬 스토리지

• 로컬 스토리지는 아래와 같은 파일 경로에(맥os) 물리적으로 저장된다. (하드디스크)
• ~/Library/Application Support/Google/Chrome/Default/Local Storage
• 데이터 파일은 프로토콜_도메인_인덱스.localstorage 라는 이름의 파일로 저장된다.
• 예를 들어 ohgyun.com에서 생성한 로컬 스토리지라면, http_ohgyun.com_0.localstorage라는 파일로 저장된다.
• 페이지가 로드되기 전에 브라우저는 저장되어있는 데이터를 읽어 메모리에 올려둔다.
• 동일 오리진 정책을 기준으로 동작하기 때문에 google에서 저장한 데이터를 naver에서 불러올 수 없다.
  - 테스트
  
  

• 브라우저 창을 닫거나 컴퓨터를 종료해도 사라지지 않을 뿐만 아니라, 사용자가 지우지 않으면 영구적으로 저장된다.

세션 스토리지

세션 스토리지는 브라우저 탭에 종속 된다.

새로고침 까지는 데이터가 유지된다. 탭을 닫으면 사라지고, 다른 탭에서는 데이터를 불러올 수 없다.

• 테스트
  
  다른탭에서 호출 (같은 오리진)
  

사용자가 웹 브라우저를 통해 웹서버에 접속한 시점으로부터 웹 브라우저를 종료하여 연결을 끝내는 시점까지, 같은 사용자로부터 오는 일련의 요청을 하나의 상태로 보고, 그 상태를 일정하게 유지하는 기술.
즉, 방문자가 웹 서버에 접속해있는 상태를 하나의 단위로 보고 그것을 세션이라고 한다.

세션 동작순서

1. 클라이언트 요청 (사용자가 웹사이트 접근)

2. 서버는 접근클라이언트의  Request-Header필드인 cookie를 확인하여, 클라이언트가 해당 세션ID를 보냈는지 확인

3. 세션ID가 존재하지 않는다면, 서버는 세션ID를 생성해 클라이언트에게 전송.

4. 서버에서 클라이언트로 준 세션ID를 쿠키를 사용해 서버에 저장한다.

5. 클라이언트는 재접속시, 이 쿠키를 이용하여 세션ID값을 서버에 전달한다.

참고자료

https://ohgyun.com/417 (로컬 스토리지)

https://ko.javascript.info/localstorage (로컬 스토리지, 세션 스토리지)

https://untitledtblog.tistory.com/47 (로컬 스토리지, 세션 스토리지)

https://cheershennah.tistory.com/135 (쿠키,세션)