자바스크립트로 웹 개발을 하면서 로그인 기능이 필요한 적이 있었다. 브라우저 상에 로그인 정보를 저장하는 기능만 필요했기 때문에 DB에 저장하지 않고, 간단한 웹 API 중 하나인 LocalStorage를 사용했었다.

LocalStorage vs SessionStorage

웹 스토리지는 데이터를 브라우저 상에 저장하는 것으로 로컬 스토리지와 세션 스토리지가 있다.

세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워진다. 즉, 같은 웹사이트를 여러 창이나 탭에 띄워도 서로 데이터가 독립적이고, 탭을 닫을 경우 데이터도 지워진다.

반면에, 로컬 스토리지는 웹페이지의 세션이 끝나도 데이터는 지워지지 않는다. 여러 탭이나 창에서 데이터가 공유되며 탭이나 창을 닫아도 데이터는 브라우저에 계속 남아 있다. 하지만, 이러한 영속성은 동일한 컴퓨터에서 동일한 브라우저를 사용할 때만 해당된다. 따라서 가른 기기나 브라우저간에 데이터가 공유되거나 데이터가 유지되어야 한다면 데이터베이스나 클라우드 플랫폼을 이용해야한다.

Window.localStorage

• 웹 스토리지는 key-value로 데이터를 저장할 수 있다. 자료구조의 해시 테이블과 유사하다.
• 웹 스토리지의 기본적인 사용 방법은 같다. localStorage부분을 sessionStorag로 바꾸면 된다.
• window.localStorage를 줄여서 localStorage로 사용할 수 있다.

기본사용

// myCat key에 Tom value를 저장
localStorage.setItem("myCat", 'Tom');

// myCat key로 value 읽어오기
const cat = localStorage.getItem("myCat");

localStorage.removeItem("myCat");

localStorage.clear();

localStorage.length;

주의사항

• 웹 스토리지는 문자열(string)데이터만 저장할 수 있다.

> localStorage.setItem('num', 1)
undefined
> localStorage.getItem('num') === 1
false
> localStorage.getItem('num')
"1"
> typeof localStorage.getItem('num')
"string"

• 해결방법 => JSON형태로 데이터를 쓰고 읽기

> localStorage.setItem('json', JSON.stringify({a: 1, b: 2}))
undefined
> JSON.parse(localStorage.getItem('json'))
{a: 1, b: 2}

참고)

• https://www.daleseo.com/js-web-storage/
• https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API