항목 가져오기 설정 및 삭제하기

localStorage와 sessionStorage는 동일한 네 가지 핵심 메서드를 제공합니다: getItem(key), setItem(key, value), removeItem(key) 및 clear()입니다. 두 저장소는 브라우저가 관리하는 단순한 키-값 저장소입니다.

localStorage.setItem("theme", "dark")는 "theme" 키에 문자열을 저장합니다. 키와 값은 모두 문자열이어야 합니다. 문자열이 아닌 값은 저장 전에 String()을 통해 문자열로 강제 변환되므로 객체와 배열이 조용히 손상됩니다.

구조화된 데이터를 저장하려면 JSON으로 직렬화하십시오: localStorage.setItem("user", JSON.stringify(user)). 다음과 같이 다시 읽을 수 있습니다: const user = JSON.parse(localStorage.getItem("user")). 저장된 값의 형식이 잘못되었을 수 있으므로 항상 try/catch로 parse를 감싸십시오.

getItem("missing")은 키가 없을 때 null을 반환하며 undefined를 반환하지 않습니다. 기본값을 제공하려면 null 병합 연산자를 사용하십시오: const theme = localStorage.getItem("theme") ?? "light".

대괄호 및 점 표기법도 사용할 수 있습니다: localStorage.theme = "dark" 및 localStorage["theme"]입니다. 두 방식 모두 작동하지만 의도가 불분명해질 수 있으므로, 이것이 객체 속성이 아니라 지속적인 저장소임을 명확히 나타내는 명시적 메서드 호출을 우선 사용하십시오.

localStorage.removeItem("theme")은 하나의 키를 삭제합니다. localStorage.clear()는 현재 출처의 모든 키를 삭제합니다. clear()는 파괴적인 작업이므로 반드시 필요한 이유가 있을 때만 호출하십시오. 페이지의 모든 스크립트가 설정한 데이터가 삭제됩니다.

localStorage.length와 localStorage.key(index)를 사용해 저장된 모든 키를 순회하거나 Object.keys(localStorage)를 전개하십시오. 이는 마이그레이션, 디버깅, 그리고 "cache:"로 시작하는 모든 키 삭제와 같은 접두사 기반 정리에 유용합니다.

브라우저는 출처당 대략 5~10MB를 할당합니다. 할당량을 초과하면 QuotaExceededError가 발생합니다. 이미지 캐시나 문서 초안처럼 잠재적으로 큰 값을 저장할 때는 오류로 애플리케이션이 중단되지 않도록 setItem을 try/catch로 감싸십시오.

저장소는 전체 출처에서 공유됩니다. 같은 출처에서 실행되는 다른 스크립트, 제3자 라이브러리, 브라우저 확장 프로그램과의 충돌을 피하려면 키에 앱이나 기능 이름을 접두사로 붙이십시오(app:settings, cart:items).

저장 기능은 완전히 동기식이므로 모든 호출이 디스크 입출력이 완료될 때까지 주 스레드를 차단합니다. 매우 큰 데이터를 저장하거나 짧은 반복문 안에서 setItem을 호출하지 마십시오. 대신 업데이트를 하나의 직렬화된 객체로 묶어 한 번에 처리하십시오.

기능 구성은 같지만 수명은 다릅니다. sessionStorage는 탭을 닫을 때 삭제되고 localStorage는 브라우저를 다시 시작해도 유지됩니다. 일시적인 마법사 상태에는 sessionStorage를, 새로 고친 후에도 유지되어야 하는 사용자 환경 설정에는 localStorage를 선택하십시오.

키가 한 번도 설정되지 않았을 때 localStorage.getItem("missing-key")은 무엇을 반환합니까?

getItem, setItem, removeItem 및 전체 삭제 기능은 웹 저장소의 네 가지 핵심 요소입니다. 값은 항상 문자열이므로 구조화된 데이터는 JSON으로 감싸십시오. null 반환, QuotaExceededError, 그리고 다른 스크립트와 출처를 충돌 없이 공유하기 위한 키 이름 공간 지정을 고려하십시오.