저장소 이벤트와 제한
변경에 반응하고 용량 제한을 준수합니다.
저장소 이벤트와 제한은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
저장소 변경에 반응하기
storage 이벤트를 사용하면 한 탭에서 다른 탭이 localStorage를 변경할 때 반응할 수 있습니다. 간단한 탭 간 동기화를 가능하게 합니다.
저장소 변경 수신
window에 이벤트 수신기를 추가하세요. 동일 출처의 OTHER 탭에서 localStorage가 변경될 때마다 실행되며, 변경을 일으킨 탭에서는 실행되지 않습니다.
window.addEventListener("storage", (e) => {
console.log("Key changed:", e.key);
});StorageEvent 객체
이벤트에는 key, oldValue, newValue, storageArea, url이 포함됩니다. 이 값들을 함께 보면 정확히 무엇이 변경되었는지 알 수 있습니다.
window.addEventListener("storage", (e) => {
console.log(e.key, e.oldValue, "->", e.newValue);
});OTHER 탭에서만 실행됨
중요한 세부 사항은 이벤트가 setItem을 호출한 동일한 탭에서는 실행되지 않는다는 점입니다. 이벤트는 다른 탭에 알리기 위한 것이므로, 동일한 탭의 업데이트에는 의존하지 마세요.
탭 간 동기화 패턴
이벤트를 사용하여 탭의 상태를 일관되게 유지하세요. 예를 들어 한 탭에서 인증 토큰을 삭제하면 모든 탭에서 사용자를 로그아웃시킬 수 있습니다.
window.addEventListener("storage", (e) => {
if (e.key === "token" && e.newValue === null) {
logoutUI();
}
});clear() 감지하기
clear()가 실행되면 key가 null로 설정된 이벤트가 발생합니다. 모든 항목을 초기화하도록 이 경우를 처리하세요.
window.addEventListener("storage", (e) => {
if (e.key === null) resetApp();
});저장소 할당량
각 출처에는 제한된 저장 용량이 할당되며, 일반적으로 localStorage 전체에 약 5MB가 제공됩니다. 이는 IndexedDB보다 훨씬 작으므로 적당한 양만 저장하세요.
할당량 초과 오류
할당량을 초과하면 setItem에서 QuotaExceededError가 발생합니다. 크기가 크거나 신뢰할 수 없는 쓰기 작업은 항상 try/catch로 감싸세요.
try {
localStorage.setItem("big", hugeString);
} catch (e) {
console.log("Storage full:", e.name);
}UTF-16은 두 배로 계산됨
문자열은 UTF-16으로 저장되므로 각 문자는 대략 2바이트를 사용합니다. 5MB 할당량에는 약 250만 자가 저장되며, ASCII가 아닌 텍스트에서는 저장할 수 있는 문자가 더 적습니다.
사용량 추정하기
key와 값의 길이를 합산하여 사용량을 대략 측정할 수 있습니다. 정확한 측정 기능은 없지만 유용한 추정치를 얻을 수 있습니다.
let total = 0;
for (let i = 0; i < localStorage.length; i++) {
const k = localStorage.key(i);
total += k.length + localStorage.getItem(k).length;
}
console.log(total, "chars");더 큰 저장소를 사용할 때
몇 MB를 넘는 대용량 또는 구조화된 데이터에는 IndexedDB를 사용하세요. 웹 저장소는 작은 플래그, 환경 설정, 토큰에 가장 적합합니다.
빠른 확인
저장소 이벤트와 제한
복습
storage 이벤트는 출처의 OTHER 탭에 localStorage 변경을 알리며, key, oldValue, newValue를 전달합니다(clear()를 호출하면 key는 null입니다). 할당량은 대략 5MB이며 이를 초과하여 쓰면 QuotaExceededError가 발생하므로, 위험할 수 있는 쓰기 작업은 try/catch로 감싸고 더 큰 데이터에는 IndexedDB를 사용하세요.
자주 묻는 질문
“저장소 이벤트와 제한” 강의는 무료인가요?
네 — “저장소 이벤트와 제한” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“저장소 이벤트와 제한”에서 뭘 배우나요?
변경에 반응하고 용량 제한을 준수합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“저장소 이벤트와 제한” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.