클라이언트 스토리지라고도하는 브라우저 데이터 저장 및 작업은 데이터가 필요하지 않거나 웹 서버로 전송 될 수없는 경우 유용합니다.
이 기사는 브라우저 데이터를 저장하는 이러한 10 가지 방법을 살펴보고 각 기술의 한계, 장단점 및 각 기술의 최상의 용도를 다루는 방법을 살펴 봅니다.
지침 용량은 엄격하게 제한되지 않지만 메모리를 채우면 브라우저가 느려지거나 충돌 할 수 있습니다. 읽기/쓰기 속도는 가장 빠른 옵션은 지속성이 좋지 않습니다. 브라우저에서 데이터가 새로 고침되고 JavaScript 변수에 상태를 저장하도록 지우는 것이 가장 빠르고 쉬운 옵션입니다. 나는 당신이 모범이 필요하지 않다고 생각하지만 ...
프로 :
사용하기 쉬운
WebSQL을 사용하지 마십시오! 2010 년 사양이 더 이상 사용되지 않았기 때문에 실행 가능한 옵션이 아닙니다.- 스토리지를 점검하십시오
Storage API는 웹 스토리지, indexeddb 및 캐시 API의 사용 가능한 공간을 확인할 수 있습니다. Safari 및 IE를 제외한 모든 브라우저는 약속 기반 API를 지원합니다.이 API는 할당량 (도메인에 사용 가능한 공간) 및 사용 (사용 된 공간)을 계산하는 .estimate () 메소드를 제공합니다. 예를 들면 : 다른 두 가지 비동기 방법이 있습니다
.persist () : 사이트에 영구 데이터를 저장할 수있는 권한이있는 경우 return true, .persisted () : 사이트가 영구 데이터를 저장 한 경우 true를 반환합니다. 브라우저 개발자 도구 (Firefox에서 Storage in Firefox)의 애플리케이션 패널을 사용하면 LocalStorage, SessionStorage, IndexedDB, WebSQL, Cookies 및 Cache Storage를보고, 수정 및 지우실 수 있습니다. 개발자 도구의 웹 패널에서 모든 항목을 클릭하여 HTTP 요청 및 응답 헤더에서 전송 된 쿠키 데이터를 확인할 수도 있습니다. 스토리지 핫팟
이러한 스토리지 솔루션은 완벽하지 않으므로 복잡한 웹 애플리케이션에서 여러 솔루션을 채택해야합니다. 이것은 더 많은 API를 배우는 것을 의미합니다. 그러나 모든 상황에서 선택을하는 것이 좋습니다. 물론 올바른 옵션을 선택할 수 있다고 가정 해 봅시다! 로컬 스토리지 대안에 대해 자주 묻는 질문
웹 개발에서 로컬 스토리지에 대한 대안을 찾을 때 세션 스토리지, 쿠키 및 indexeddb와 같은 옵션을 고려할 수 있습니다. 세션 스토리지는 페이지 세션을위한 임시 스토리지를 제공하는 반면 쿠키는 세션 관리 및 제한된 데이터 저장에 사용할 수있는 각 HTTP 요청과 함께 전송되는 작은 데이터입니다. IndexedDB는 클라이언트 측에 구조화 된 데이터를 저장하기위한보다 강력한 솔루션을 제공하므로 비동기 데이터 검색이 필요한 응용 프로그램에 적합합니다. Server-Side Storage Solutions (예 : MySQL, PostgreSQL, MongoDB) 또는 클라우드 기반 데이터베이스 (예 : FireBase, AWS DynamODB 또는 Google Cloud Firestore)는 더 넓은 데이터 저장소 또는 보안 및 지속성이 중요 할 수 있습니다. 또한 일부 클라이언트 프레임 워크는 자체 상태 관리 솔루션을 제공하는 반면 서비스 작업자는 오프라인 기능을 위해 데이터 및 자산을 캐시 할 수 있으므로 PWAS (Progressive Web Application)에 적합합니다.
언제 로컬 스토리지를 사용해서는 안됩니까? 로컬 스토리지는 범용 클라이언트 스토리지 솔루션이지만 경우에 따라 가장 적합한 옵션이 아닐 수도 있습니다. 첫째, 로컬 스토리지는 암호화 또는 보안 조치가 부족하여 무단 액세스에 취약하기 때문에 민감하거나 기밀 정보를 저장하는 데 적합하지 않습니다. 암호 또는 개인 신분과 같은 중요한 데이터는 강력한 보안 프로토콜을 사용하여 서버 측에 안전하게 저장해야합니다. 둘째, 로컬 스토리지는 일반적으로 도메인 당 약 5-10MB의 용량이 제한되어 있습니다. 많은 양의 데이터를 처리 해야하는 응용 프로그램에는 적합하지 않습니다. 이 경우 더 큰 데이터 세트를 수용하기 위해 Server-Side 데이터베이스 또는 IndexEdDB와 같은 강력한 클라이언트 옵션을 고려해야합니다. 마지막으로, 로컬 스토리지는 성능 문제, 특히 대형 데이터 세트를 처리 할 때 동기식으로 실행되고 기본 스레드를 차단할 수 있으므로 성능 문제를 일으킬 수 있습니다. 성능 크리티컬 애플리케이션의 경우 IndexedDB와 같은 비동기 스토리지 솔루션을 사용하거나 메모리 캐싱을 구현하여 원활한 사용자 경험을 유지할 수 있습니다. 요약하면, 로컬 스토리지는 경량의 비 민감한 데이터 저장에 유용하지만 프로젝트의 특정 요구 사항을 평가해야합니다. 민감한 정보, 대규모 데이터 세트 또는 성능 크리티컬 애플리케이션의 경우 데이터 보안, 확장 성 및 최상의 사용자 경험을 보장하기 위해 대체 스토리지 솔루션을 탐색해야합니다.
어느 것이 더 나은지, 로컬 스터리지 또는 세션 스터리지?
LocalStorage 및 SessionStorage의 선택은 주로 필요한 데이터 지속 기간과 특정 사용 사례에 따라 다릅니다. 브라우저 세션간에 데이터를 지속해야 할 때 LocalStorage는 더 나은 선택입니다. 사용자 기본 설정, 설정 또는 캐시 리소스와 같은 데이터를 저장하는 데 적합하며, 사용자가 브라우저를 닫고 나중에 웹 사이트로 돌아온 경우에도 사용자에게 유지해야합니다. 지속성과 저장 용량이 높아짐에 따라 장기 데이터 보존이 필요한 시나리오에 이상적입니다. 반면에 SessionStorage는 현재 페이지 세션에서만 사용할 수있는 데이터에 이상적입니다. 사용자가 탭이나 브라우저를 닫으면 데이터가 자동으로 지워져 개인 정보 보호를 보장하고 불필요한 정보의 의도하지 않은 저장 위험을 줄입니다. 따라서 단일 사용자 상호 작용에서 양식 데이터, 카트 컨텐츠 또는 상태 관리와 같은 임시 데이터를 관리하는 데 이상적입니다. 클라이언트 데이터베이스는 무엇입니까? 프론트 엔드 데이터베이스라고도하는
클라이언트 데이터베이스는 웹 애플리케이션 클라이언트 (일반적으로 사용자의 웹 브라우저)에있는 데이터베이스입니다. 클라이언트 장치에 데이터를 저장하고 관리하는 데 사용되며 웹 애플리케이션이 오프라인으로 작동하고 서버로드를 줄이며 빈번한 서버 요청의 필요성을 최소화하여 사용자 경험을 향상시킬 수 있습니다. 클라이언트 데이터베이스는 종종 웹 개발에서 사용자의 장치에 데이터를 직접 저장하고 검색하는 데 사용됩니다. 클라이언트 데이터베이스의 가장 일반적인 예 중 하나는 웹 브라우저에 다량의 데이터를 저장하기위한 구조화 된 데이터베이스를 제공하는 저수준 JavaScript API 인 IndexEdDB입니다. IndexedDB를 사용하면 개발자가 데이터를 작성, 읽기, 업데이트 및 삭제할 수 있으므로 오프라인 스토리지 및 대량의 정보 관리가 필요한 응용 프로그램에 적합합니다. 클라이언트 데이터베이스의 다른 예로는 소량의 데이터를 저장하기위한 웹 스토리지 (LocalStorage 및 SessionStorage)와 사용자 세션 동안 임시 데이터 저장을 위해 JavaScript에서 구현 된 다양한 인 메모리 데이터베이스가 있습니다. 클라이언트 데이터베이스는 사용자가 오프라인 상태이거나 인터넷 연결이 제한된 경우에도 기능을 유지 해야하는 PWAS (Progressive Web Applications)와 같은 웹 응용 프로그램에 특히 유용합니다. 사용자 장치에 로컬로 데이터를 저장하는 메커니즘을 제공하여 지연 시간을 줄이고 사용자 경험을 향상시켜 서버 측 데이터베이스를 보완합니다. 다른 유형의 클라이언트 스토리지는 무엇입니까?
위 내용은 10 클라이언트 측 스토리지 옵션 및 사용시기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
