웹 애플리케이션의 개발로 인해 클라이언트 측 스토리지의 사용이 증가했으며 클라이언트 측 스토리지를 구현하는 다양한 방법이 있습니다. 가장 간단하고 호환성이 가장 높은 솔루션은 Cookie이지만 실제 클라이언트 측 저장소로서 Cookie에는 치명적인 결함이 많이 있습니다. 또한 userData Behavior는 IE6 이상에서도 사용할 수 있고, globalStorage는 Firefox에서도 사용할 수 있으며, Flash Local Storage는 Flash 플러그인이 있는 환경에서도 사용할 수 있습니다. 그러나 이 방법들은 모두 호환성 제한이 있으므로 실제로는 그렇지 않습니다. 사용하기에 이상적입니다. 위의 상황에 대해 HTML5는 보다 이상적인 솔루션을 제공합니다. 복잡한 데이터를 저장해야 하는 경우 웹 데이터베이스를 사용할 수 있고 클라이언트 프로그램처럼 SQL을 사용할 수 있습니다(그러나 웹 데이터베이스 표준은 현재 교착 상태에 있으며, 현재 구현된 브라우저는 매우 제한적입니다.) 키/값 쌍으로 간단하게 해결할 수 있는 데이터를 저장해야 하는 경우 웹 스토리지를 사용할 수 있습니다. 본 글에서는 주로 Web Storage의 구체적인 현황을 다양한 측면에서 소개하고 있습니다.
sessionStorage 및 localStorage
웹 저장소는 실제로 sessionStorage와 localStorage의 두 부분으로 구성됩니다.
sessionStorage는 세션에 데이터를 로컬로 저장하는 데 사용됩니다. 이 데이터는 동일한 세션의 페이지에서만 액세스할 수 있으며 세션이 끝나면 데이터가 삭제됩니다. 따라서 sessionStorage는 영구 로컬 저장소가 아니며 세션 수준 저장소일 뿐입니다.
localStorage는 데이터가 적극적으로 삭제되지 않는 한 영구 로컬 저장소에 사용됩니다.
쿠키 대신 웹 스토리지를 선택하는 이유는 무엇입니까?
쿠키와 비교하여 웹 저장소는 다음과 같이 요약할 수 있는 많은 장점을 가지고 있습니다.
1. 더 커진 저장 공간: IE8에서 각 독립 저장 공간은 10M입니다. 다른 브라우저의 구현은 약간 다르지만 쿠키보다 훨씬 큽니다.
2. 저장된 콘텐츠는 서버로 전송되지 않습니다. 쿠키가 설정되면 쿠키 콘텐츠가 요청과 함께 서버로 전송됩니다. 이는 로컬에 저장된 데이터에 대한 대역폭을 낭비하는 것입니다. 웹 스토리지의 데이터는 로컬에만 존재하며 어떤 방식으로든 서버와 상호 작용하지 않습니다.
3. 더 풍부하고 사용하기 쉬운 인터페이스: 웹 스토리지는 더 풍부한 인터페이스 세트를 제공하여 데이터 작업을 더 쉽게 만듭니다.
4. 독립적인 저장공간 : 각 도메인(서브도메인 포함)은 독립적인 저장공간을 가지고 있습니다. 각 저장공간은 완전히 독립적이므로 데이터 혼동이 없습니다.
호환성은 어떤가요?
IE8, Firefox3.6, Chrome5, Safari4, Opera10 등의 브라우저에서 다양한 테스트를 진행했습니다. 각 브라우저의 API 구현은 기본적으로 동일하며 특정 호환성 문제가 있는 것으로 나타났습니다. 정상적인 사용에 영향을 미칩니다.
세션스토리지 테스트
이 섹션에서는 주로 sessionStorage의 일부 기능을 테스트합니다. 테스트의 초점은 각 브라우저별 세션 정의와 크로스 도메인 상황에 있습니다. 테스트 방법은 매우 간단합니다. 페이지 A를 열고 페이지 A에 현재 세션 데이터를 쓴 다음 다른 방법을 사용하여 페이지 A의 링크나 버튼을 통해 페이지 B에 들어갑니다. 페이지 B가 페이지 A의 데이터에 액세스할 수 있는 경우 이는 다음을 의미합니다. 브라우저는 현재 페이지 A와 B를 동일한 세션으로 간주합니다. 테스트의 구체적인 결과는 표 1에 나와 있습니다.
표 1 세션스토리지 호환성 테스트
표 1에서 볼 수 있듯이 보안상의 이유로 교차 하위 도메인을 포함하여 모든 브라우저의 도메인 전체에 걸쳐 세션 데이터에 액세스하는 것이 허용되지 않습니다. 다른 측면에서는 주류 브라우저의 구현이 상대적으로 일관됩니다.