새로 고침하거나 문서 목록이 리로드 되었을 때 문서 목록 스타일을 고정하는 방법

[nayeon-hub]

문제 1 문서 목록의 열고 닫힘 스타일을 어떻게 유지할 것인가?

고민 1

• localstrage에 각 문서의 열고 닫힘의 유무를 저장한다.

• 그럼 어떤 형식으로 데이터를 저장할 것인가?

  • 각 id마다 false(닫힘) or true(열림) 을 저장하자

  해결 방법 1

  • 객체 나열 : { 23 : false, 24 : true, 25 : false }
  • 장점 - key로 값을 바로 불러올 수 있다
  • 단점 - 상위 문서를 닫을 때 닫을 수 없다. (상위 문서를 닫으려면 document마다 아이디를 탐색해서 아이디를 하나하나 false로 바꿔줘야 함)
    • 닫을 때만 해당 문서 아래의 문서들에 대한 탐색이 필요하다 - 저장된 데이터에서 아이디 하나 하나 false로 바꿈 (문서를 탐색할 것인가?) -> 어떻게 문서를 탐색할 것인가? -> 대신 탐색을 하게 될 경우의 수 1번 - 상위 문서 닫을 때!

  해결 방법 2 (탐색이 많아짐)

  • 배열 트리 : [{ id : 23, style : false, documents : [{id : 14, style : true, documents : […] } ] } ]
  • 문서 트리 데이터를 GET(network 요청)할 때 데이터 안에 각 id마다 style field를 추가하고 localstorage에 저장한다.
  • 상위 문서를 닫을 때마다 저장된 데이터에서 해당 아이디에 해당하는 하위 문서들을 전부 탐색하여 style filed : false 데이터를 저장한다.
  • 단점 : 문서를 열 때도 저장된 데이터에서 해당 아이디를 찾기 위해 탐색하여서 style field : true를 저장한다. 열어야 하는 경우(데이터 추가할 때) 닫아야 하는 경우(데이터를 삭제할 때, 상위 문서 닫을 때) - 트리가 깊어질 수록 탐색이 길어짐 - 탐색을 해야 하는 경우가 3가지
  • 단점 : 데이터를 새로 받아오게 되면 이전 스타일을 어떻게 전달할 것인가? 애매함