[아고라 스테이츠] 로컬 스토리지에 배열 데이터 저장하기

[JS] 로컬 스토리지에 배열 데이터 넣기/가져오기

---

원본 데이터

• data.js
• 변수명 agoraStatesDiscussions으로 원본 데이터(배열 형태)가 들어가있다.
  

로직

• script.js

let data; // (1) 앞으로 사용할 데이터. 변수 선언

const localStorageData = localStorage.getItem("discussionData");

if(localStorageData) { // 만약 localStorageData가 있으면 (= submit을 한 번 한 이후)
  data = JSON.parse(localStorageData) // 로컬 스토리지에서 가져온 데이터로 할당
} else { // (2) localStorageData가 없으면 ( = 최초 렌더링일 경우)
  data = agoraStatesDiscussions.slice(); // data는 agoraStatesDiscussions(원본 데이터)을 복사한 그대로. (QQQ: 처음 1번만 쓸 것이기 때문에 그냥 얕은 복사로? 주소값 같아도 상관없어서?)
}
...중략...

const render = (element) => {
  while (element.firstChild) { // (8-1) 일단 ul 안의 내용 다 지우기
    element.removeChild(element.firstChild);
  }
  for (let i = 0; i < data.length; i += 1) { // (8-2) ul 안에 하나씩 다시 붙이기
    element.append(convertToDiscussion(data[i]));
  }
  return 
};

render(ul); // (3) 원본 데이터 그대로 화면에 렌더링됨.

// 이벤트 핸들러 함수
const submitQuestion = (e) => { // (5) submit 버튼 누르면
  e.preventDefault(); 

  let newObj= {
  id: "",
  createdAt: currentTime,
  ...중략

data.unshift(newObj) // (6) data에 새 데이터(newObj) 추가됨.

localStorage.setItem("discussionData", JSON.stringify(data)); // (7) 업데이트 된 data를 다시 로컬 스토리지의 `discussionData` 키의 값으로 저장

render(ul); // (8) 렌더 실행
...중략
}

formSubmit.addEventListener( 'submit', submitQuestion ) // (4) submit 버튼 눌렀을 때 이벤트 설정

• (6) 이렇게 Local Storage에 들어오는 것을 볼 수 있다.