[TIL] LocalStorage에 대하여

 

 

WebStorage란? 

데이터를 어딘가에 저장해야 할 때 사용하는 WebStorage. 

보통 데이터베이스 서버나 클라우드에 저장하는 경우가 많지만, 저장해야 할 데이터가 별로 중요하지 않거나 유실 되어 상관 없는 데이터일 때 브라우저상에 데이터를 저장한다. 이를 WebStorage 라고 한다. 

 

 

로컬 스토리지 vs. 세션 스토리지

웹스토리지에는 로컬 스토리지(LocalStorage)와 세션스토리지(sessionStorage)가 있다.

세션 스토리지는 웹페이지의 세션이 끝날 때 저정된 데이터가 지워지는 반면, 로컬 스토리지는 웹페이지의 세션이 끝나도 데이터가 지워지지 않는다. 

 

다시 말해, 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면 여러개의 세션 스토리지에 데어티가 서로 격리 되어 자장되며 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸 된다.

반면에 로컬 스토리지의 경우 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 그대로 남아 있다.

 

세션 스토리지를 사용할 때는 코드의 localStorage 부분을 sessionStorage로 대체하기만 하면 된다.

 

 

예제코드 

웹 스토리지는 기본적으로 키(key)와 값(value)으로 이루어진 데이터를 저장할 수 있다.

 

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

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

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

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

 

로웹 스토리지는 오직 문자형(string) 데이터 타입만 지원하기 때문에, JSON 형태로 변경하여 데이터를 읽고 써야 한다.