웹개발을 하다 보면 자동로그인이나 자동로그아웃등 세션이나 쿠키같은 임시 저장기능을 사용해야할 경우가 많습니다.
오늘은 로컬스토리지(Local Storage) 세션스토리지(Session Storage) 쿠키(Cookie)에 대해 소개해 드리겠습니다.
기존에 많이 사용하던 쿠키 외에 로컬스토리지와 세션스토리지는 Html5에서 새롭게 사용되는 저장소 입니다.
그렇다면 쿠키와의 차이가 뭘까요?
쿠키는, 서버측과 클라이언트측 양쪽에서 쿠키 데이터를 사용하는 api가 존재하고, 소멸시간을 지정 할 수 있으며 4kb 내의 데이터만 보관할 수 있습니다. 또한 매 http 통신시 쿠키정보가 함께 전송이 되기 때문에 로컬/세션 스토리지를 사용할때보다 미세하게 나마 통신속도가 느립니다. 불필요한 자원이 사용되는 샘입니다.
세션스토리지, 로컬스토리지는 오직 클라이언트 쪽에서만 작동이 되며 용량의 제한이 없습니다. 소멸시간 또한 없으며 사용자가 직접 지우거나 특정 조건이 만족 된다면 소멸 됩니다. 이 둘의 차이는 소멸시점에 있습니다. 바로 영구적이냐 영구적이지 않냐의 차이 입니다. 로컬스토리지는 사용자가 지우지 않는이상 영구적으로 남아있지만 세션스토리지는 웹브라우져를 닫는순간 사라지게 됩니다.
세션스토리지와 로컬스토리지의 사용법은 동일합니다.
1 2 3 4 5 6 7 | localStorage.setItem('name', 'zerocho'); localStorage.setItem('birth', 1994); localStorage.getItem('name'); // zerocho localStorage.getItem('birth'); // 1994 (문자열) localStorage.removeItem('birth'); localStorage.getItem('birth'); // null (삭제됨) localStorage.clear(); // 전체 삭제 | cs |
[출처: https://www.zerocho.com/]
앞쪽에 localStorage를 sessionStorage로만 바꿔주면 문법은 동일 합니다.
기본적으로 자바스크립트(Javascript)에서 사용 가능하며 Php나 Jsp, Asp 등에서 출력문을 이용해서도 사용 가능 합니다.
기타 사용중에 궁금한점이 있다면 댓글 남겨 주세요
'개발이야기 > Javascript' 카테고리의 다른 글
| 사용자가 PC인지 Mobile인지 확인방법 (0) | 2018.02.19 |
|---|---|
| ajax통신간 jsonp를 이용한 크로스도메인 이슈 해결 (2) | 2018.02.14 |
| jQuery .data 사용 방법 (0) | 2018.02.12 |
| 페이지 이동 여러가지 방법 (0) | 2018.02.07 |
| Collapse와 Accordion를 jQuery로 직접 구현하기 (Javascript) (0) | 2018.01.31 |
