React에서 localStorage 읽기 및 쓰기

localStorage는 네 가지 핵심 메서드인 setItem(key, value), getItem(key), removeItem(key), clear()를 제공하는 브라우저 내장 저장소입니다. 데이터는 페이지를 새로 고침하거나 브라우저를 다시 시작해도 유지됩니다.

window 객체에 속하며 출처별로 범위가 정해지므로 각 도메인마다 서로 격리된 저장 공간을 가집니다.

모든 localStorage 호출은 주 스레드에서 동기적으로 실행됩니다. 많은 양의 데이터를 읽거나 쓰면 렌더링이 차단되어 사용자 인터페이스가 버벅거릴 수 있습니다.

따라서 저장하는 값은 작게 유지하고, 키를 입력할 때마다 또는 스크롤 이벤트가 발생할 때마다 쓰지 마십시오.

localStorage에는 문자열만 저장할 수 있습니다. 객체나 배열을 저장하려면 setItem을 호출하기 전에 JSON.stringify(value)로 먼저 직렬화해야 합니다.

문자열이 아닌 값을 직접 저장하면 문자열로 강제 변환되므로, 객체는 쓸모없는 문자열인 [object Object]가 됩니다.

값을 읽을 때는 JSON.parse(localStorage.getItem(key))를 호출하지만, 저장된 문자열이 손상되었거나 다른 출처에서 작성된 경우 파싱 중 오류가 발생할 수 있습니다.

파싱을 try/catch로 감싸고 기본값으로 대체하여 잘못된 항목 하나 때문에 컴포넌트 전체가 중단되지 않도록 하십시오.

localStorage를 항상 사용할 수 있는 것은 아닙니다. 서버 측 렌더링 중에는 window가 존재하지 않으며, 일부 비공개 브라우징 모드에서는 쓰기 작업 중 오류가 발생합니다. 기능 확인으로 접근을 보호하십시오.

안전한 확인 방법은 try/catch 안에서 임시 키를 설정하고 제거한 다음, 오류가 발생하면 거짓을 반환하는 것입니다.

대부분의 브라우저는 출처별 localStorage 용량을 대략 5MB로 제한합니다. 이 제한을 초과하면 쓰기 작업에서 QuotaExceededError가 발생합니다.

따라서 localStorage는 작은 데이터에는 적합하지만 이미지, 대규모 데이터 세트 또는 캐시된 애플리케이션 프로그래밍 인터페이스 응답에는 적합하지 않습니다.

적합한 대상은 작고 민감하지 않은 사용자 인터페이스 및 사용자 상태 데이터입니다. 테마 설정, 사이드바의 접힘 상태, 마지막으로 사용한 필터, 닫은 배너, 저장되지 않은 양식 초안 등이 이에 해당합니다.

이 값들은 새로 고침 후에도 유지하고 싶지만 서버와의 왕복 통신은 필요하지 않은 데이터입니다.

토큰이나 비밀번호 같은 비밀 정보는 저장하지 마십시오. 페이지의 모든 스크립트가 localStorage를 읽을 수 있으므로 XSS에 취약합니다. 또한 큰 객체와 서버를 기준으로 삼는 상태도 저장하지 마십시오.

민감한 인증 데이터는 httpOnly 쿠키에 저장하고, 기준 데이터는 서버에 저장해야 합니다.

두 저장소 모두 동일한 인터페이스를 제공하지만, sessionStorage는 탭이 닫히면 삭제되며 탭 간에 공유되지 않습니다. localStorage는 무기한 유지되고 동일한 출처의 모든 탭에서 공유됩니다.

짧은 기간 동안 탭별로 사용할 데이터에는 sessionStorage를, 오래 유지할 설정에는 localStorage를 선택하십시오.

쿠키는 작고 모든 HTTP 요청과 함께 전송되므로 인증에는 적합하지만 일반 데이터에는 대역폭을 낭비합니다. IndexedDB는 5MB 제한을 훨씬 넘어서는 대용량의 구조화된 데이터를 저장할 수 있는 비동기 데이터베이스입니다.

서버에서 읽는 인증 정보에는 쿠키를, 작은 클라이언트 설정에는 localStorage를, 크거나 복잡한 데이터에는 IndexedDB를 선택하십시오.

최소한의 도우미 함수는 localStorage.setItem(key, JSON.stringify(value))로 쓰고, JSON.parse(localStorage.getItem(key))를 감싼 보호된 try/catch로 읽으며, 실패하면 기본값을 반환합니다.

이 작은 래퍼를 사용하면 직렬화와 오류 처리를 한곳에서 관리할 수 있습니다.

localStorage 데이터 유형에 대한 이해를 확인해 보십시오.

localStorage 인터페이스와 이것이 동기식이고 문자열만 저장하며 약 5MB로 제한된다는 점을 배웠습니다. 또한 SSR과 비공개 모드에서 안전하게 파싱하고 사용 가능 여부를 확인하는 방법도 배웠습니다.

sessionStorage, 쿠키, IndexedDB와 비교하면서 상황에 맞는 저장소를 선택하는 방법도 살펴보았습니다.