2023.02.08 TIL

항해99/TIL

2023.02.08 TIL

공대루루 2023. 2. 9. 02:46

javascript 공부를 좀 열심히 해야겠다 시간을 내서라도...

1. localstorage에 값 보내기

문제 사항

localstorage에 값을 넣는데 이게 리스트처럼 쌓이지 않고 계속 업데이트가 된다

값이 쌓여야 이걸 가져와서 사용할 수 있는데 업데이트만 되니 당장 화면에 출력은 되지만 브라우저를 껐다가 켰을때 남아있는 값이 가장 최근 값밖에 없었다

해결방법

1. 뭔가 빈 리스트를 만들어서 넣어줘야 할 것같아서 리스트를 생성했다.

if (localStorage.getItem('todo').length > 0) {
        local_list = JSON.parse(localStorage.getItem('todo'))
    } else {
        local_list = []
    }
console.log(local_list)

localStorage.setItem("todo", JSON.stringify({'todolist': todos}))
let todolist_data = JSON.parse(localStorage.getItem('todo'))
local_list.push(todolist_data)
localStorage.setItem("todo", JSON.stringify(local_list))

2. 근데 이렇게 했더니 또 쌓이지는 않고 업데이트만 된다... 로컬스토리지가 업데이트가 되지않으려면 먼저 받아오고 거기에 내가 입력한것도 넣어서 다시 보내면 될것 같은데 어떻게 해야하나 모르겠다

// 로컬스토리지 데이터 조회
let local_data = JSON.parse(localStorage.getItem('todo'))
// 객체 생성
let todo_list = {'todo': todos}

if (Boolean(local_data) && local_data.length > 0) {
    todo_list.index = local_data.length;
    local_data.push(todo_list)
    localStorage.setItem('todo', JSON.stringify(local_data))
} else {
    todo_list.index = 0;
    localStorage.setItem('todo', JSON.stringify([todo_list]))
}

let todolist = JSON.parse(localStorage.getItem('todo'))

3. 오 드디어 로컬스토리지에 값이 쌓이기 시작했다 역시 먼저 조회를 해서 그다음 생성한 객체를 넣어주면 되는구나

JSON.parse() 랑 JSON.stringify() 는 열심히 콘솔에 찍어가면서 값을 어떻게 받는지 확인하고 배치해줬다.

알게된점

리스트가 필요하다고 냅다 비어있는 리스트를 만들면 프로그램이 돌면서 계속 리스트를 초기화하기 때문에 값이 쌓이지 않는다!! 아무것도 없는 변수를 만들어서 거기에 정해진 형식의 객체를 넣으면 그 다음부터는 가장 처음에 넣은 객체를 시작으로 하나씩 쌓이게 된다!

2. localstorage에 값 삭제하기

삭제 버튼을 눌렀을 때 todolist 의 항목들을 삭제하고 로컬스토리지에 있는 값도 하나씩 삭제해야한다.

문제 사항

삭제까지는 잘 되는데 index 값을 데이터의 길이값으로 줬더니 새로 접속할때 중복되는 index가 발생했다

예를들면 index값이 0,1,2,3,4,5 인 데이터들이 있는데 삭제를 0,1,4,5했을 때 그 다음에 입력되는 값이 3(데이터의 길이)이 되어서 index가 중복되는 값이 생겨서 뒤죽박죽이 된다.

해결방법

삭제할때 마다 index 값이 다시 부여해야하나 고민했는데 아무리 생각해도 그렇게 하면 너무 복잡해질 것 같다... 어떻게 코드를 짜야할지 감도 안잡혀서 팀원들과 이야기를 해봤더니 뭔가 간단하게 해결할 수 있을 것 같은 방법을 찾았다!

let indexList = local_data.map(item => item.index)
todo_list.index = Math.max(...indexList) + 1;

남아있는 값중에서 가장 큰값부터 index를 생성하기 시작하면 곂치는 일도 없고 뒤죽박죽되지 않는다!!!

알게된점

뭔가 거창하게 만드는게 중요한게 아니다

2. 체크박스에 기능부여하기

문제 사항

todolist의 특성상 입력할때마다 받은 값을 계속 출력해야해서 for 구문을 사용하였다. 각각의 label을 구분하려다보니 Id 값에 변수가 들어가서 아래와 같은 형태가 되었다.

id = 'todolabel${index}'

체크리스트가 클릭되면 class를 바꿔주려고 아래의 기능을 시도했는데 id 값이 그냥 문자열로만 이루어져있지 않아서인지 인식이 안되고 있다.

document.getElementById('todolabel${index}')

해결방법

' '를 사용해버려서 id를 todolabel${index} 라는 문자로 인식을 한 것이었다!!!

` `을 사용했더니 변수까지 제대로 인식이 되었다.

document.getElementById(`todolabel${index}`)

저작자표시