[TIL] 2109017 오늘 공부는 sessionStorage

세션 스토리지!

들어보기만 했지 사용할일이 있을까 했는데 오늘 써보게 되었다.

 

쿠키 / 웹스토리지(로컬,세션 스토리지)와의 차이를 먼저 알고 넘어가면 좋을 것 같다. 

쿠키는 매 http요청마다 api 호출이 되어 서버에 부담이 된다고 한다. 웹 스토리지는 쿠키의 단점을 보완해서 만든 기술로, 서버가 아닌 클라이언트에 정보를 저장한다. 서버를 건드리지 않음! 

 

보통 자동 로그인은 로컬 스토리지에 저장하고, 비 로그인한 장바구니는 세션 스토리지에 저장한다고 한다.(오호) 

 

로컬 스토리지랑 쿠키에만 뭘 담아봤는데 세션 스토리지에 담게되다니, 어려울줄 알았는데 사용법이 로컬 스토리지랑 똑같다. 다만 로컬 스토리지와 약간의 차이점이 있다. 

 

탭별로 값을 다르게 두고 싶어서 크롬에 탭 아이디가 있는지 검색하다가 세션 스토리지를 쓰게 되었다. 중복탭으로 접근하는 유저를 감지할 때 좋을 것 같다. 

 

둘 다, 브라우저에 키-값 쌍을 저장할 수 있다. 다만 이 키-값은 반드시 문자열이어야 한다. 

 sessionStorage.setItem("amy", false));

 

false라는 값을 그냥 저장했더니, 출력할때 type이 string으로 찍혔다. 나는 불리언으로 만들고 싶어서, setItem에서 아채처럼 json 문자열로 바꿔준 후, getItem 에서 json.parse로 가져왔더니 type을 찍었을 때 boolean으로 찍혔다.

 

sessionStorage.setItem("amy", JSON.stringify(false));

const amy = JSON.parse(sessionStorage.getItem('amy'))

 

세션 스토리지

1. 세션이 종료되면 만료된다. 즉 브라우저가 닫히면 사라진다. but 새로고침하면 살아있다. 

2. 같은 url을 다수의 탭에서 열면 각각의 탭에 대한 sessionStorage를 생성한다.

 

로컬 스토리지

1. 세션이 종료되도 만료되지 않는다.  만료기한이 없다.

2. url이 같다면 모든 탭과 창에서 실시간으로 공유된다. 

3. HTML5 지원 안하는 브라우저에서 사용할 수 없다. 

 

세션 스토리지 사용법

 

저장할 때, 

sessionStorage.setItem(key,value)

 

가져올 때,

sessionStorage.getItem(key, value)

 

삭제할 때,

sessionStorage.removeItem(key,value)

 

전체 다 삭제할 때,

sessionStorage.clear() 

 

저장된 항목의 개수 구할 때,

length