localStorage란?

LocalStorage

 

localStorage는 웹 브라우저가 제공하는 저장소 중 하나로, 키와 값을 이용해 데이터를 클라이언트 측에 영구적으로 저장할 수 있게 해줍니다. 이 저장소는 페이지 세션이 종료되어도 데이터가 사라지지 않으며, 동일한 오리진(도메인, 프로토콜, 포트가 모두 같은 주소)에 대해 약 5MB 정도의 데이터를 저장할 수 있습니다. localStorage를 사용하면 사용자가 브라우저를 닫았다가 나중에 다시 열어도 저장된 데이터를 유지할 수 있습니다.

localStorage의 주요 메서드

• setItem(key, value): 주어진 키에 값을 저장합니다. key와 value 모두 문자열이어야 합니다. 이미 존재하는 키에 값을 저장하면 이전 값을 덮어씁니다.
• getItem(key): 주어진 키에 해당하는 값을 조회합니다. 해당 키가 존재하면 값을 문자열로 반환하고, 존재하지 않으면 null을 반환합니다.
• removeItem(key): 주어진 키와 그에 해당하는 값을 삭제합니다.
• clear(): localStorage에 저장된 모든 데이터를 삭제합니다.

setItem 사용 예제

setItem 메서드는 데이터를 localStorage에 저장할 때 사용됩니다. 예를 들어, 사용자의 할 일 목록을 저장하고자 할 때 다음과 같이 사용할 수 있습니다.

const tasks = [

  { id: 1, task: "구독하기", completed: false },

  { id: 2, task: "좋아요", completed: false },

  { id: 3, task: "추천", completed: false },

  { id: 4, task: "강아지 산책하기", completed: false }

];

// 할 일 목록을 문자열로 변환하여 "TASKS" 키로 저장합니다.

localStorage.setItem("TASKS", JSON.stringify(tasks));

 

이 코드는 tasks 배열을 JSON 문자열로 변환하여 localStorage의 "TASKS" 키로 저장합니다. 이렇게 저장된 데이터는 나중에 getItem을 사용해 불러올 수 있습니다.

---

데이터 불러오기

저장된 데이터를 불러오려면 getItem 메서드를 사용하면 됩니다. 예를 들어, "TASKS" 키로 저장된 할 일 목록을 다시 불러오고 싶다면 다음과 같이 할 수 있습니다.

 

const storedTasks = localStorage.getItem("TASKS");

if (storedTasks) {

  const tasks = JSON.parse(storedTasks);

  // 이제 tasks 배열을 사용할 수 있습니다.

}

 

이 코드는 "TASKS" 키로 저장된 값을 불러와서, 그 값이 null이 아닌 경우 JSON 문자열을 다시 JavaScript 객체로 변환합니다.