웹 개발 정리 - LocalStorage, SessionStorage, Cookie

Gary's Note·2022년 1월 4일
1
post-thumbnail

1. ToDo

- 웹 개발에서 중요한 개념 중 하나인 브라우저의 저장방식을 정리!!


2. What, Why, How

[WHAT]

  • 뭐냐?
  • 웹 브라우저에서 제공하는 용도, 특성 등에 따른 저장 공간이다.

[WHY]

  • 왜 쓰냐?
  • 웹 개발을 하게되면 페이지가 새로고침이 되어도 유지가 되어야하는 경우도 있고 웹 브라우저를 다시 켰을 때 남아있어야 하는 데이터도 있다. 이럴때를 대비해 용도, 특성 등에 따라 웹 브라우저 내에 있는 브라우저 저장소를 사용한다.

[How]

  • 그래서 어떻게 쓰는데?
  1. 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; 
  1. 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; 
  1. 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;';

3. 정리하고 끝~

구분 localStorage sessionStorage cookie
공통 key & value로 이루어짐 / 데이터를 문자열 형태로 저장
특징 사용자가 데이터에 접근 가능
동기 방식
서버로 데이터 자동 전송
HTTP 요청시 이용
저장 기간 영구적(삭제할 때까지) 세션이 유지되는 동안 (브라우저/탭을 유지하는 동안) 설정한 유효기간
접근성 모든 윈도우 같은 탭 모든 윈도우

( 이 밖에도 많은 특성들이 있지만 제일 중요한 특성으로 정리~ )
profile
기록~기록~기록~기록~

0개의 댓글