개요
경량 애플리케이션을 개발할 때 - 우리는 일부 데이터를 저장하기를 원할 수 있습니다. 데이터베이스가 과도하다면 훌륭한 대안이 있습니다. localStorage!
데이터베이스 목적으로 데이터베이스를 대체하지는 않지만 쉽게 액세스할 수 있는 데이터 포인트를 저장하는 데 활용할 수 있는 간단한 파일 기반 스토리지 시스템 역할을 합니다.
이 기사에서는 사용 방법을 배웁니다.
localStorage브라우저에 데이터를 쉽게 저장할 수 있습니다. 이 데이터는 다음으로 저장됩니다. 키-값 쌍 사용자가 쉽게 검색할 수 있습니다.
데이터 저장 위치 localStorage React에서는 매우 쉽습니다.
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
서두르지 않고 이것이 어떻게 작동하는지 자세히 알고 싶다면 계속 읽으십시오!
localStorage?
localStorage 개발자가 저장할 수 있는 웹 저장소 개체입니다. 키-값 쌍 사용자가 브라우저를 닫거나 다시 시작해도 이 데이터가 모든 페이지 새로 고침에서 살아남고 만료 날짜가 없는지 확인합니다. 저장된 키-값 쌍에는 배열, 개체, 문자열, 숫자 및 기타 여러 유형의 데이터가 포함될 수 있습니다.
그러나 이것은 사용자가 브라우저의 캐시와 로컬 저장소를 지울 때 데이터가 손실되기 때문에 웹사이트와 웹 앱에서 데이터베이스의 역할을 대체할 수 없습니다. 로컬 저장소 그리고 그대로 사용해야 합니다. 그럼에도 불구하고 사용자가 사용할 수 있는 상황이 있습니다. localStorage, 예를 들어 어두운 모드 기능, 사용자의 양식 입력 값 유지 및 기타 여러 기능이 있습니다.
localStorage 브라우저의 저장소 개체에 액세스할 수 있는 기본 제공 메서드가 있습니다. 한 가지 예는 setItem() 키와 값을 추가할 수 있는 메서드 localStorage, 따라서 데이터를 저장할 수 있습니다. 다른 방법은 데이터를 검색하는 데 사용됩니다 – getItem(), 데이터 삭제 – removeItem(), 모두 지우기 localStorage 인스턴스 – clear(), 등등.
데이터 저장 localStorage 와 더불어 세트 아이템() 방법
XNUMXD덴탈의 setItem() 방법을 사용하면 모든 데이터 유형의 값을 localStorage 키에 값을 할당하여 키-값 쌍. 이 키는 우리가 그것을 검색할 때마다 해당 값을 검색하는 데 사용됩니다. localStorage.
참고 : 에 데이터를 저장하려면 localStorage, 먼저 다음으로 변환해야 합니다. JSON 문자열 를 사용하여 JSON.stringify() 기능. 그리고 그것을 검색하고 싶을 때 다음을 사용하여 데이터를 구문 분석합니다. JSON.parse(), JSON 문자열을 다시 JSON 객체.
React에서 데이터로 작업할 때 우리는 자주 사용합니다. 후크 보관/보유하는 데 도움이 됩니다. 후크는 또한 해당 데이터를 업로드할 위치를 찾는 데 도움이 될 수 있습니다. 이것은 또한 적용됩니다 localStorage 우리가 사용할 것이기 때문에 useState() 및 useEffect() 후크. 이 후크는 매우 중요합니다. useState() 후크는 데이터를 보유하고 설정하는 데 사용되는 반면 useEffect() 후크는 기본적으로 첫 번째 렌더링 후 그리고 두 번째 매개변수가 변경될 때 전달된 상태가 될 때마다 트리거됩니다.
기초를 설명한 후 데이터를 저장하는 데 사용할 코드는 다음과 같습니다. localStorage:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
먼저 저장하려는 데이터를 저장할 상태를 만들었습니다. localStorage, 그리고 우리는 useEffect() 후크, 상태를 두 번째 매개변수로 전달합니다. 이렇게 하면 상태가 변경될 때마다 데이터 localStorage 현재 값으로 업데이트됩니다.
우리는 데이터 저장을 지원하는 데 사용되는 핵심 기능을 useEffect() 훅:
localStorage.setItem('dataKey', JSON.stringify(data));
결론
이 기사에서 우리는 React hooks를 사용하여 React에 데이터를 저장하는 방법을 배웠습니다. localStorage. 이전에 언급했듯이 이것은 데이터베이스의 역할을 대체하지 않지만 UI를 개선할 수 있지만 브라우저와 독립적으로 유지되도록 의도되지 않은 일부 사용자 관련 데이터를 저장하는 데 도움이 됩니다.
