34. March 29, 2021

브라우저의 저장소

 

 

 

 

지난 11월에 쿠키와 세션의 차이에 대한 포스팅을 작성했었는데, 브라우저 저장소를 공부하다 새로운 웹 스토리지에 대해 알게되어 쓰는 포스팅 

yunieom.tistory.com/120

27. November 23, 2020

 

쿠키의 특징인 자동전송으로 인한 보안의 취약함과, 너무나도 큐티뽀짝한 데이터 저장공간(4KB)를 보안하기 위해 

HTML5부터 웹스토리지가 등장했다. 웹 스토리지는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능이다. 당연하게도 쿠키와 다르게 사용하는 브라우저가 HTML5를 지원하지 않는다면 이 웹스토리지를 사용할 수 없다. (예.  인터넷 익스플로러 8.0 이하 버전)

*세션 쿠키와는 다르니 헷갈리지 않도록 할 것*

 

 

웹스토리지에는 두가지 스토리지가 있다. 

로컬스토리지

세션스토리지

 

로컬 스토리지 (Local Storage)

• window.localStorage 객체
• 브라우저를 종료해도 유지되는 데이터, 즉 명시적으로 지우지 않는 한 영구적으로 보존된다.
• 도메인별로 생성되고 타 도메인의 로컬 스토리지에는 접근이 불가능하다.
• 다른 브라우저 탭이라도 도메인이 동일하다면 같은 로컬 스토리지를 사용한다.
• 지속적으로 사용하는 정보를 저장하기 용이하다. (자동 로그인)

 

세션 스토리지 (Session Storage) 

• window.sessionStorage 객체
• 브라우저나 탭을 실행시킬 때마다 세션 스토리지가 생성된다.
• 동일한 브라우저/탭 이더라도 도메인이 다른경우 새로운 세션 스토리지가 생성된다.
• 서로 다른 세션 스토리지는 서로간 영향을 주지 않고 독립적으로 작동한다.
• 윈도우 복제로 생성된 경우, 혹은 같은 브라우저에서 새로운 탭을 실행한 경우 세션 스토리지가 복제되어 생성된다.
• 일시적으로 사용하는 정보를 저장하기 용이하다. (입력 폼 정보 저장, 비로그인 장바구니)

 

 

---

 

reference

 

it-eldorado.tistory.com/90

velog.io/@kler/TIL4-%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-%EC%BF%A0%ED%82%A4-%EC%A0%95%EB%A6%AC

velog.io/@hellozin/%EC%BF%A0%ED%82%A4-%EC%84%B8%EC%85%98-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EC%9B%B9-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80