서버 없이, 로컬 환경에서 프론트 기능구현을 동작할때 유용하게 사용할 수 있는 로컬스토리지에 대해서 오늘 남겨보려고 한다.

데이터 저장하기(setItem)

localStorage.setItem('key', 'value');

setItem 메소드를 사용하면 key와 value를 로컬 스토리지에 저장할 수 있다. 만약 이미 저장된 key 값이 있다면, 이전에 저장된 value 값을 대체한다.

데이터 불러오기(getItem)

localStorage.getItem('key');

getItem 메소드를 사용하면 key를 통해 저장된 value 값을 불러올 수 있다.

데이터 삭제하기(removeItem)

localStorage.removeItem('key');

removeItem 메소드를 사용하면 key 값에 해당하는 데이터를 삭제할 수 있다.

localStorage.removeItem('username');

위와 같이 실행하면, 'username'이라는 key에 해당하는 'Alice'라는 value를 삭제할 수 있다.

💡 [Chrome 브라우저에서 localStorage에 저장된 정보를 확인하는 방법]

1. Chrome 개발자 도구 열기
2. Elements 탭에서 Storage 선택:
   개발자 도구에서 Elements 탭을 선택하고, 하위에 있는 Storage 항목을 클릭.
3. Local Storage 선택:
   이어서 Storage 항목 아래에 있는 Local Storage 항목을 선택.
4. localStorage에 저장된 정보 확인:
   선택한 Local Storage 항목에서, 왼쪽에 저장된 정보의 키(key) 목록이 표시되고 이 중 확인하려는 정보의 키를 클릭하면, 오른쪽에 해당 정보의 값(value)이 표시된다.
   값이 JSON 형태로 저장된 경우, 개발자 도구에서 자동으로 이를 파싱(parsing)하여 보여줌.