[Javascript/자바스크립트] 프론트단에서 클라이언트에 정보 저장하기 (localStorage와 sessionStorage)

[Javascript/자바스크립트] 프론트단에서 클라이언트에 정보 저장하기 (localStorage와 sessionStorage)

백단에서 흔하게 쓰는 쿠키와 세션이 아닌 자바스크립트로 사용하는 방법이 있다. 바로 localStorage와 sessionStorage이다. 브라우저에서 지원하는 API 만큼 각 브라우저에 따라 사양이 조금씩 다른데 일단 지원여부는 전부 확인된다.

[출처 : https://developer.mozilla.org/]

localStorage와 sessionStorage 모두 호환성에 큰 문제는 없되 각 브라우저에 따라 용량차이를 보인다.

[출처 : https://www.html5rocks.com/en/tutorials/offline/quota-research/]

localStorage와 sessionStorage의 차이는 세선이 종료됐을 때 해당 데이터를 유지하느냐의 여부에 따라 갈린다. 이름에서 유추할 수 있듯이 localStorage는 세션이 종료돼도 데이터가 유지되고 sessionStorage는 세션이 종료되면 데이터도 함께 소실된다. 해당 페이지를 작동시킨 브라우저가 완전 종료되면 sessionStorage안의 데이터가 삭제된다고 보면 된다.

 

실험을 위해 CodeSandbox에 예제를 만들어놓았다.

iframe상태에서는 잘 작동하지 않으니 우측화면 하단 왼쪽의 "Open preview in new window"버튼을 눌러 진행하면 편할 것이다.

해당 페이지에 아예 처음 접속했을 시에는 저장된 데이터가 없어서 localStorage와 sessionStorage에 각각 데이터를 저장하는 모습이다. 브라우저를 껐다가 다시 접속해보면

이렇게 localStorage의 데이터는 남아있되 sessionStorage의 데이터는 소실된 것을 확인할 수 있다. 각각 용도에 맞춰 사용하면 좋을 것이다.

 

개략적인 사용법은 codeSandbox에 올린 것으로 확인할 수 있지만 정리하자면 이렇다. 매우매우 간단하다.

localStorage.setItem("test", 1); // localStorage의 test라는 공간에 1이라는 데이터를 저장
localStorage.getItem("test"); // localStorage의 test라는 공간에 들어있는 데이터를 불러옴
localStorage.removeImte("test") // localStorage의 test라는 공간에 들어있는 데이터를 지움

sessionStorage.setItem("test", 1); // sessionStorage의 test라는 공간에 1이라는 데이터를 저장
sessionStorage.getItem("test"); // sessionStorage의 test라는 공간에 들어있는 데이터를 불러옴
sessionStorage.removeImte("test") // sessionStorage의 test라는 공간에 들어있는 데이터를 지움