- 뭐냐?
- 웹 브라우저에서 제공하는 용도, 특성 등에 따른 저장 공간이다.
- 왜 쓰냐?
- 웹 개발을 하게되면 페이지가 새로고침이 되어도 유지가 되어야하는 경우도 있고 웹 브라우저를 다시 켰을 때 남아있어야 하는 데이터도 있다. 이럴때를 대비해 용도, 특성 등에 따라 웹 브라우저 내에 있는 브라우저 저장소를 사용한다.
- 그래서 어떻게 쓰는데?
- LocalStorage
[javascript] // key에 value을 넣어서 저장 localStorage.setItem("key", value); // key의 value값이 뭔지 호출 localStorage.getItem("key"); // key값으로 데이터 삭제 localStorage.removeItem("key"); // localStorage의 모든 key를 삭제 localStorage.clear(); // localStorage의 모둔 key의 갯수 localStorage.length;
- SessionStorage
[javascript] // key에 value을 넣어서 저장 sessionStorage.setItem("key", value); // key의 value값이 뭔지 호출 sessionStorage.getItem("key"); // key값으로 데이터 삭제 sessionStorage.removeItem("key"); // sessionStorage의 모든 key를 삭제 sessionStorage.clear(); // sessionStorage의 모둔 key의 갯수 sessionStorage.length;
- Cookie
[javascript] // 모~든 쿠키 document.cookie // key 이름으로 value 값의 쿠키 생성 document.cookie = "key=value" // key 이름으로 value 값의 [보안] 쿠키 document.cookie = "key=value; Secure" // key 이름과 value 값을 가진 쿠키를 만료일과 함께 저장 document.cookie = "key=value; expires="+date.toGMTString(); // key 이름과 value 값을 가진 쿠키를 적용 경로와 함께 저장 document.cookie = "key=value; path=/"; // key 이름과 일치하는 쿠키 값 가져오기 document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)'); // key 이름의 쿠키를 삭제처리 - expires 시간을 옛~날 옛적으로 돌리면 된다. document.cookie = key + '=; expires=Thu, 01 Jan 1930 00:00:10 GMT;';
구분 localStorage sessionStorage cookie 공통 key & value로 이루어짐 / 데이터를 문자열 형태로 저장 특징 사용자가 데이터에 접근 가능
동기 방식서버로 데이터 자동 전송
HTTP 요청시 이용저장 기간 영구적(삭제할 때까지) 세션이 유지되는 동안 (브라우저/탭을 유지하는 동안) 설정한 유효기간 접근성 모든 윈도우 같은 탭 모든 윈도우
( 이 밖에도 많은 특성들이 있지만 제일 중요한 특성으로 정리~ )