JS LocalStorage

게임을 로비 화면과 게임 플레이 화면으로 분리하면서 html 페이지 간 데이터를 공유해야 했다.

(현재 플레이 중인 스테이지, 최고 점수, 현재 점수, 쿠키 체력 등)

따로 서버를 이용하지 않고도 페이지 간 데이터를 전달하는 간단한 방법이 있다.

 

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

Window.localStorage - Web API | MDN

 

LocalStorage에 원하는 값을 저장하면 명시적으로 연결(import)되어 있지 않은 페이지에서도 값을 꺼내 쓸 수 있다.

 

/* 값 저장하기 */
localStorage.setItem('key', 'value');

/* 값 가져오기 */
localStorage.getItem('key');

 

사용해본 결과 페이지를 새로고침 해도 LocalStorage의 데이터는 그대로 남아있다. 게임 데이터가 사라지지 않는다는 점에서는 이점이지만 값을 없애고 싶은 경우 직접 삭제해 줘야 한다는 번거로움이 있다.

/* 아이템 제거 */
localStorage.removeItem('key');

/* 스토리지 비우기(전체 삭제) */
localStorage.clear();

 

---

나중에 서비스를 운영하려면 서버에 연결하고 각 사용자의 데이터를 저장해야겠지만, 그것과는 별개로 사용자가 창을 껐다 켜도 데이터를 유지시킬 수 있어 유용할 것 같다.

플레이 후 저장된 최고 점수와 현재 점수를 로비로 옮겨온 모습