Local Storage

웹 브라우저 내부에 데이터를 저장할 수 있는 공간이다. 해당 컴퓨터의 웹 브라우저에 데이터를 저장하기 때문에 다른 기기에서 사용할 때는 접근할 수 없다는 단점이 존재한다.

사용 예시

Local Stroage에 데이터를 관리하는 방법 중에서 저장, 불러오기와 관련된 과정이 처음에 가장 많이 사용한다. 아래 코드는 투두리스트 프로젝트에서 처음 local Storage를 통해 정보 저장, 불러오기를 구현한 코드이다.

const TODOS_KEY = "todos";
// 저장하기
function saveToDos() {
  localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}

// 불러오기
const savedToDos = localStorage.getItem(TODOS_KEY);

저장의 경우, setItem을 통해 key와 value값을 저장한다. 불러오기의 경우, getItem을 통해 정보를 가져온다. 위 예시에서는, JSON.stringify라는 함수를 통해 저장 데이터를 전부 string처리하여 저장했다.

Local Storage에 대해 더 많은 정보는 Local Storage MDN에서 확인 할 수 있다.

Filter

단어 그대로 원하지 않는 데이터를 정제하는 함수이다. Array에 사용이 가능하다.

사용예시

수업에서 데이터 저장에 Array를 사용했는데, Array의 데이터를 삭제하는 과정은 특정 데이터를 삭제한 새로운 Array를 생성하는 과정이라고 설명했다.

...
toDos = toDos.filter((targetId) => targetId.id !== parseInt(tr.id));
saveToDos();
...

따라서, 삭제하려고 하는 데이터를 제외하고 새로운 Array를 만든 다음에 다시 저장하는 과정을 통해 데이터를 삭제했다.

시간 관련 함수들

Javascript에서 현재 시간 상황을 알려주거나 시간 상황을 부여하는 함수가 있다.

Date

먼저 현재 시간 상황을 알려주는 함수이다. 자세한 내용은 Date MDN을 통해 확인하면 된다.

setInterval

setInterval (function, time)의 형태로 해당 function을 시간 간격마다 반복 실행할 경우 사용한다

setTimeout

setTimeout (function, time)의 형태로 해당 function을 time 특정 시간 이후 실행할 경우 사용한다.