프로그래머 도전기 58일차

오늘은

오늘은 일요일입니다~ 한주의 마무리를 하면서

할일 목록 만들기도 끝을 냈습니다~

프론트엔드를 배우고나서 처음으로 진행한

개인 프로젝트였는데 나름 잘 마무리를 한 것 같아서 다행입니다

 

 

 

할 일 목록 만들기

function saveTodos() {
    localStorage.setItem('todos', JSON.stringify(todos));
}

function loadTodos() {
    const saveTodos = localStorage.getItem('todos');
    if(saveTodos) {
        todos = JSON.parse(saveTodos);
        setCountItems();
        fillTodos();
    }
}

local Storage를 이용해서 데이터를 기억할 수 있도록 해주었습니다

 

* 웹 스토리지(web storage)
- 로컬 스토리지(localStorage) = 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않음
- 세션 스토리지(sessionStorage) = 웹페이지의 세션이 끝날 때 저장된 데이터가 지워짐
=> 차이점 : 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐의 차이

브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우는 경우
-> 세션 스토리지 => 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장
                           -> 창이 닫힐 때 저장해 둔 데이터도 함게 소멸
-> 로컬 스토리지 => 여러 탭이나 창 간에 데이터가 서로 공유
                           -> 탭이나 창을 닫아도 브라우저에 데이터가 그대로 남음
=> 공통점 : 동일한 컴퓨터에서 동일한 브라우저를 사용할 때만 해당
                = 다른 컴퓨터에서 같은 브라우저를 사용하더라도 엄연히 다른 브라우저이므로
                   서로 다른 두 개의 로컬 스토리지에 데이터가 저장된다


* 로컬 스토리지(localStorage)
- setItem() = key, value 추가
              => window.localStorage.setItem(key, value)
              객체 -> 문자열로 변환해서 저장해야 함
              const 객체저장 = JSON.stringify(객체);
              const 배열저장 = JSON.stringify(배열);
              => 로컬 스토리지에는 문자열만 저장된다
              ex) localStorage.animal = "cat";
                   localStorage["animal"] = "cat";
                   localStorage.setItem("animal", "cat");

- getItem() = value 읽어 오기
               => window.localStorage.getItem(key)
               -> 데이터를 접근할 때는 JSON.parse를 해주면 된다
               ex) const val_1 = localStorage.animal;
                    const val_2 = localStorage["animal"];
                    const val_3 = localStorage.getItem("animal");
                    => const val_1 = JSON.parse(localStorage["animal"]);

- removeItem() = item 삭제
                    => window.localStorage.removeItem(key);
- clear() = 도메인 내의 localStorage 값 전체 삭제
           => window.localStorage.clear();
- length = 전체 item 갯수
           => 로컬 스토리지에 저장된 값의 갯수를 확인하기 위해서 사용
           => const length = window.localStorage.length;
- key() = index로 key값 찾기
         => window.localStorage.key(index);
         => key()함수의 파라미터로 index를 전달하여 해당 index의 key 값을 조회

    switch (nowShowType) {
        case 'All':
            const allTodo = getAllTodos();
            allTodo.forEach(todo => {fillTodo(todo);});
            break;
        case 'ToDo':
            const ToDo = getToDos();
            ToDo.forEach(todo => {fillTodo(todo);});
            break;
        case 'Done':
            const DoneTodo = getDoneTodos();
            DoneTodo.forEach(todo => {fillTodo(todo);});
            break;
        default:
            break;
    }
}

switch문을 활용하여 하단의 버튼을 눌렀을 경우
보여지는 리스트의 타입을 변경할 수 있도록 하였습니다

 

 

https://inkydchoyee.github.io/To_Do_List/

 

 

 

 

 

 

 

2023. 10. 29 (일)