아고라스테이츠 만들어 보자

목표

• 새로고침을 눌러도 입력받은 데이터가 사라지지 않게 한다.
• 데이터를 localStorage에 저장하고 가져온다.

---

아고라스테이츠 데모 보기

LocalStorage란?

localStorage는 웹 스토리지 객체이다. 브라우저 내에 키-값 형태로 저장할 수 있다. sessionStorage는 페이지를 새로고침하기 전까지 정보를 저장하고, localStorage는 브라우저를 다시 실행해도 정보를 저장한다.

localStorage에 저장하기

localStorage.setItem('test', 1);

localStorage에서 가져오기

localStorage.getItem('test')

개발자도구에서 localStorage 정보 확인하기

위 코드를 콘솔에 입력하고 localStorage ‘test’이름으로 1을 저장했다. 콘솔의 상단 application 메뉴로 이동하면 좌측 메뉴 중에 Storage 항목이 있다. (콘솔 폭이 좁을 경우 >>에 감춰져 있는 경우도 있다.)

항목을 클릭해 보면 'test' key에 1 value가 담긴 것을 확인할 수 있다. key를 수정을 할 수 있고, 삭제를 하면 key-value가 모두 삭제된다.

---

브라우저 동작시, render() 하기 전에!

localStorage가 있는지 확인한다

LocalStorage에 ‘agoraData’ key로 저장된 배열이 없으면 dummy data를 저장한다.

if (!localStorage.getItem('agoraData')) {
  saveDataLocalStorage(agoraStatesDiscussions)
}

localStorage에 저장시 JSON.stringify()

JSON 메서드 stringify를 사용해 객체를 JSON으로 바꿔서 저장한다. (JSON은 나중에 알아보기로 ::TODO::)

입력 폼을 받으면 로컬스토리지에 저장해 주어야 하기에 함수로 만들어 준다.

const saveDataLocalStorage = (obj) => {
  localStorage.setItem('agoraData', JSON.stringify(obj));
  return;
}

localStorage에서 불러올 때 JSON.parse()

JSON을 객체로 다시 바꾸려면 JSON.parse(localStorage.getItem(key))를 한다.

const getDataLocalStorage = (name) => {
  let localData = JSON.parse(localStorage.getItem(name))
  return localData;
}

---

Discussion 나열할 때,

dummy data의 배열을 사용하는 것이 아니라, 로컬스토리지에서 가져온 배열을 출력한다.

let localData = getDataLocalStorage('agoraData')

for (let i = 0; i < localData.length; i++) {
  element.append(createElement(localData[i]));
}

---

Discussion을 추가

submit button을 누르면 다음과 같은 순서로 진행된다.

1. 로컬스토리지의 배열을 다시 가져온다.
2. 가져온 배열에 방금 입력한 정보(newObj)를 추가(unshift)한다.
3. 업데이트된 배열을 다시 로컬스토리지에 저장한다.
4. 새로고침을 하면 방금 추가한 discussion이 잘 나온다.

(최근 것이 앞에 나오게 하기 위해 unshift를 사용하였지만 시간 기준으로 sort 기능이 추가되면 좋을 것 같다.)

let localData = getDataLocalStorage('agoraData')
localData.unshift(newObj)
saveDataLocalStorage(localData)

// 중략

render(ul)

이렇게 로컬스토리지를 사용하면 새로고침을 해도, 심지어 브라우저를 껐다 켜도 작성한 discussion이 남아있다. 지금은 더미데이터와 로컬스토리지이지만 나중엔 API로 서버에 저장하면 좋겠다!

출처

json | 모던 JavaScript 튜토리얼