로컬 저장소 보기 및 수정

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

이 가이드에서는 Chrome DevTools를 사용하여 localStorage 키-값 쌍을 보고 수정하고 삭제하는 방법을 설명합니다. 로컬 저장소는 브라우저 세션의 데이터를 저장합니다.

키 및 값 localStorage개 보기

  1. 검사하려는 웹사이트에서 DevTools를 엽니다.

  2. 애플리케이션 > 저장소로 이동하여 로컬 저장소를 펼칩니다. 도메인을 클릭하여 키-값 쌍을 확인합니다.

    youtube.com의 키-값 쌍입니다.

  3. 표 아래의 값을 미리 보려면 쌍을 선택하세요.

    선택한 키의 값을 봅니다.

수동으로 키-값 쌍을 새로고침하려면 상단의 작업 모음에서 새로고침합니다. Refresh를 클릭합니다.

키-값 쌍 필터링

필요한 키-값 쌍을 빠르게 찾으려면 키 또는 값에 포함된 문자열 상단의 필터 상자에 입력합니다.

'has' 문자열을 포함하지 않는 키-값 쌍을 필터링합니다.

새 localStorage 키-값 쌍 만들기

  1. 도메인의 localStorage 키-값 쌍을 봅니다. 예를 들어 이 데모 페이지에서 확인할 수 있습니다.
  2. 표의 빈 부분을 더블클릭합니다. DevTools가 새 행을 만들고 Key 열에 커서를 맞춥니다.
  3. 새 키-값 쌍을 입력합니다.

localStorage 키 또는 값 수정

  1. 도메인의 localStorage 키-값 쌍을 봅니다. 예를 들어 이 데모 페이지에서 확인할 수 있습니다.
  2. 키 또는 값 열의 셀을 더블클릭하여 해당 키 또는 값을 수정합니다.
  3. 적용할 페이지를 새로고침하세요.

키-값 쌍 localStorage개 삭제

  1. 도메인의 localStorage 키-값 쌍을 봅니다. 예를 들어 이 데모 페이지에서 확인할 수 있습니다.
  2. 키-값 쌍을 클릭하여 선택합니다.
  3. 상단의 작업 모음에서 삭제를 탭합니다. Delete를 클릭하여 선택한 쌍을 삭제합니다. 선택한 키-값 쌍을 삭제하는 중입니다.
  4. 또는 모두 삭제를 탭합니다. Clear all을 클릭하여 모든 쌍을 삭제합니다.

콘솔에서 localStorage와 상호작용

콘솔에서 JavaScript를 실행할 수 있고 콘솔이 페이지의 JavaScript 컨텍스트에 액세스할 수 있으므로 콘솔에서 localStorage와 상호작용할 수 있습니다.

  1. DevTools에서 콘솔을 엽니다.
  2. 현재 페이지가 아닌 다른 도메인의 localStorage 키-값 쌍에 액세스하려면 상단 작업 모음의 컨텍스트 드롭다운 메뉴에서 필요한 JavaScript 컨텍스트를 선택합니다.
  3. 자바스크립트와 동일하게 Console에서 localStorage 표현식을 실행합니다.

Console에서 `localStorage` 와 상호작용