FE 지식_1. webStorage란?

FE_지식 시리즈 시작.

밀린것도 많아서 최대한 정보전달만.

WebStorage?

자바스크립트로 웹 개발을 하다보면 아무리 간단한 애플리케이션이라도 데이터를 어딘가에 저장해야 할 일이 생긴다. 보통 이럴 때 데이터베이스(DB) 서버나 클라우드(Cloud) 플랫폼에 데이터를 저장하거나 경우가 많을 것이다.

하지만 저장해야할 데이터가 별로 중요하지 않거나, 유실되도 무방할 데이터라면 서버 단에 데이터를 저장하는 것이 낭비일 수도.

그럴땐 클라이언트 단, 즉 브라우저 상에 데이터를 저장할 수 있는 웹 스토리지에 저장을 한다.

✅ 웹 스토리지는, 정리하자면 다음과 같은 특징을 가진다.

1. 서버에 전송되지 않으므로 서버에 부담이 가지 않는다.
2. 키(Key)와 값(Value)의 쌍 형태로 데이터를 저장한다.
3. 대략 5MB까지의 데이터를 저장할 수 있다.

WebStorage 의 2가지 종류

1. localStorage

• 영구 보관한다.

  • 즉, 브라우저 창 닫아도 살아있다.
  • 새로고침해도 살아있다.

• 동일한 컴퓨터, 동일한 브라우저내에서만 유지된다.

  • firefox, chrome이 서로 localStorage 가 공유되진 않는다.
  • 크롬 켜서 네이버를 3개에 띄우면 그 3개에는 같은 localStorage 를 공유한다.

2. sessionStorage

• 영구 보관하지 않는다.
  • 끄면 죽는다.
• 탭마다 각각 따로 가진다.
  • 크롬을 켜서 3개의 네이버를 띄우면 각각 sessionStorage 정보가 각자 다르다.

기본 API

WebStorage는 {key: value} 형태로 저장한다.

WebStorage를 사용할때도 이를 감안하여 코드작성이 필요하다.

// 키에 데이터 쓰기
localStorage.setItem("key", value);

// 키로 부터 데이터 읽기
localStorage.getItem("key");

// 키의 데이터 삭제
localStorage.removeItem("key");

// 모든 키의 데이터 삭제
localStorage.clear();

// 저장된 키/값 쌍의 개수
localStorage.length;

💥 sessionStorage 에 저장한다면 상단 코드의 localStorage 를 sessionStorage 로 바꾸면 된다.

주의사항

👀 WebStorage에 무언가 저장할때 무조건 문자열 형태로 저장한다.

아래 코드와 같은 코드작성이 필요하다.

localStorage.setItem('json', JSON.stringify({a: 1, b: 2})) // 저장띠.

console.log(JSON.parse(localStorage.getItem('json'))) // {a: 1, b: 2} 출력.

json 을 키로, {a: 1, b: 2} 객체를 value로 저장하는 과정이다.

JSON.stringfy() 함수를 사용해서 저장한다.

사용 예시

localStorage

• 자동 로그인 저장

sessionStorage

• 입력 폼 정보 저장
• 비 로그인 장바구니

잘못된 내용이 있다면 댓글로 알려주세요 :)

출처: https://www.daleseo.com/js-web-storage/