<JavaScript> localStorage를 사용하는 방법

💡 localStorage를 사용하는 방법

localStorage를 이용하면 웹 브라우저에서 로컬 데이터를 저장하고, 불러와 사용할 수 있습니다.

(1) 데이터 저장하기(setItem)

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

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

localStorage.setItem('username', 'Alice');

위와 같이 실행하면, 'username'이라는 key에 'Alice'라는 value를 저장하게 됩니다.

(2) 데이터 불러오기(getItem)

localStorage.getItem('key');

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

localStorage.getItem('username');

위와 같이 실행하면, 'username'이라는 key에 해당하는 'Alice'라는 value를 읽어올 수 있습니다.

(3) 데이터 삭제하기(removeItem)

localStorage.removeItem('key');

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

localStorage.removeItem('username');

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

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

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