localStorage vs sessionStorage

localStorage vs sessionStorage

 

1. localStorage

1) 개념

* stores data with no expiration date : 

  사용자의 브라우저에 영구적으로 보관되는 데이터

* 5MB 제한

* 보안 취약

* 동기방식 처리

참고 : https://www.w3schools.com/html/html5_webstorage.asp

2) 사용 케이스

사용자가 마지막에 찾아본 사람을 사용자(client) 브라우저의 로컬스토리지에 저장.

사용자가 재진입시 마지막에 찾아본 사람의 정보를 재활용 할 수 있다.

참고 : https://css-tricks.com/localstorage-examples/

 

 

2. sessionStorage

1) 개념

stores data for one session (data is lost when the browser tab is closed) :

사용자가 브라우저를 닫을 경우 사라지는 데이터

 

2) 사용 케이스

ajax 비동기 처리로 서버 통신을 하여 인터페이스를 그릴 때, 화면에서 새로고침이 일어날 경우 화면에 노출중인 값들의 기준(조회조건 등)을 유지시키기 위해 sessionStorage 를 사용.

* 동일한 이유로 localStorage 를 사용해도 상관없지만 localStorage는 삭제를 해주지 않을 경우 사용자 브라우저에 영원히 남게 되므로 삭제 처리를 잘 해주어야 한다.

참고 : https://stackoverflow.com/questions/8498357/when-should-i-use-html5-sessionstorage

 

 

3. 사용법 (저장, 조회, 삭제)

1) 저장(save)

1-1) localStorage.setItem("key", "value"); 

1-2) localStorage.key = "value";

 

2) 조회(find/search/get)

2-1) localStorage.getItem("key");

2-2) var value = localStorage.key;

 

3) 삭제(remove)

localStorage.removeItem("key");

 

※ sessionStorage usage is the same as localStorage

   sessionStorage 사용법은 localStorage사용법과 같다

 

※ How and where to find local/session stored data

    storage에 저장된 데이터 확인법

1. on chrome browser, using developer tools(F12)

  크롬브라우저 개발자 도구에서 확인

: chrome developer tools(F12) > Application tab > Storage tab (left side)

  크롬 개발자도구(F12) > Application 상단탭 > Storage 좌측 탭 에서 확인이 가능하다.

 

2. at local directory

로컬 물리 경로에서 확인

참고 : https://stackoverflow.com/questions/8634058/where-the-sessionstorage-and-localstorage-stored

 

 

※ 엉터리 영어 포스팅이 재밌다.