[JS] localstorage

개요

현재 express에서 passport모듈을 이용하여 로그인기능을 사용하고 있는데, React(프론트)에서 로그인은 되지만 새로고침을 하면 로그인이 유지가 되지않아 localstorage를 이용하기로 하였다.

localstorage

이게 뭔데?

localStorage은 javascript의 Web Storage를 이용한 것이다. 프론트에서 임시적인 데이터를 저장하여 가지고 있어야 할 때 사용하면 좋다.

Web Storage에는 두 종류, localStorage와 sessionStorage가 있다. 두 개의 차이점은 데이터 저장이 어떤 범위로 계속 보존되어 있는지에 차이가 있다.

localStorage는 어떠한 세션에 들어와있어서 그것이 끝나더라도 데이터가 지워지지않고 보존된다. 이는 같은 페이지에 대해 여러 페이지가 탭으로 열려있어서 사용하더라도 데이터가 지워지지 않고 localStorage의 내용을 삭제하지 않는다면 데이터가 유지된다.

하지만, sessionStorage는 각 탭들이 별개의 데이터들을 저장하게 되고 탭이나 창이 닫힐 때마다 데이터는 소멸하게 된다.

따라서 자신의 브라우저에서 데이터를 계속 보존시키면서 사용한다면 localStorage를, 여러 페이지 마다 다른 데이터를 보존시키고 싶다면 sessionStorage를 사용하면 되겠다!!

유의해야할 점은 localStorage를 사용할 때 유지되는 데이터는 자신의 컴퓨터, 자신의 브라우저에만 저장되어 있고 동일한 링크의 다른 컴퓨터에는 당연히 데이터가 저장되어 있지 않다는 것이다. (개인용 컴퓨터!)

사용법

localStorage.setItem("key", value); // 데이터 저장하기

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

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

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

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

// 키 값 순회
let keys = Object.keys(localStorage);
for(let key of keys) {
  alert(`${key}: ${localStorage.getItem(key)}`);
}