찾다

집 >기술 주변기기 >IT산업 >10 클라이언트 측 스토리지 옵션 및 사용시기

10 클라이언트 측 스토리지 옵션 및 사용시기

Christopher Nolan
Christopher Nolan원래의
2025-02-10 14:22:12880검색

10 Client-side Storage Options and When to Use Them 클라이언트 스토리지라고도하는 브라우저 데이터 저장 및 작업은 데이터가 필요하지 않거나 웹 서버로 전송 될 수없는 경우 유용합니다.

브라우저 데이터 저장 및 작동을위한 시나리오는 다음을 포함합니다

클라이언트 응용 프로그램의 상태를 유지합니다. 현재 화면, 입력 데이터, 사용자 기본 설정 등과 같이 클라이언트 응용 프로그램의 상태를 유지하십시오.

엄격한 개인 정보 보호 요구 사항이있는 로컬 데이터 또는 파일에 액세스하는 유틸리티.

오프라인으로 작동하는 PWA (Progressive Web Application).

    다음은 10 개의 브라우저 데이터 저장 옵션입니다
  • JavaScript 변수 dom 노드 스토리지 웹 스토리지 (LocalStorage and SessionStorage) indexeddb
    • Cache API (AppCache를 사용하지 마십시오!) 파일 시스템 액세스 API
  • 파일 및 디렉토리 항목 API
  • 쿠키 ​​
    • Window.name webSql

이 기사는 브라우저 데이터를 저장하는 이러한 10 가지 방법을 살펴보고 각 기술의 한계, 장단점 및 각 기술의 최상의 용도를 다루는 방법을 살펴 봅니다.

이 ​​옵션을 탐색하기 전에 데이터 지속성을 간단히 살펴보십시오 ...
  1. 키 포인트
  2. JavaScript 변수 : 임시 데이터가 가장 빠르지 만 페이지가 새로 고침 될 때는 현재 페이지를 보는 것보다 더 많이 절약 할 필요가없는 경우가 가장 좋습니다.
    3. DOM 노드 저장소 : 속도와 지속성 측면에서 JavaScript 변수와 유사하지만 구성 요소 별 상태에서 상태 저장;
  3. 웹 스토리지 (LocalStorage and SessionStorage) : 소량의 데이터 (LocalStorage) 또는 세션 스토리지 (SessionStorage)의 지속적인 저장에 적합합니다.
    4. INDEXEDDB : 지속되어야하는 많은 양의 구조화 된 데이터에 가장 적합하지만 API는 복잡합니다.
  4. 캐시 된 API : 오프라인 사용을 위해 PWA에 네트워크 응답을 저장하는 데 이상적으로 사용되지만 네트워크 데이터로 제한되며 일반적인 상태 저장에는 적합하지 않습니다.
    5. 쿠키 : HTTP 요청과 함께 전송되어야하는 소규모 데이터에 유용하지만 용량이 제한되어 있으며 보안 문제가있을 수 있습니다.
    6. 데이터 지속성 일반적으로 저장 한 데이터는 다음과 같습니다
    7. 영속성 : 코드가 삭제하기로 선택할 때까지 또는 가 남아 있습니다. 변동성
  7. : 브라우저 세션이 종료 될 때까지, 일반적으로 사용자가 탭을 닫을 때까지 남아 있습니다.
  8. 실제 상황이 더 상세합니다.
    9. 영구 데이터는 언제든지 사용자, 운영 체제, 브라우저 또는 플러그인에 의해 차단되거나 삭제 될 수 있습니다. 브라우저가 해당 스토리지 유형에 할당 된 용량에 접근하면 이전 또는 더 큰 품목을 삭제하기로 결정할 수 있습니다.
  9. 브라우저도 페이지 상태를 기록합니다. 웹 사이트 내비게이션에서 떠나서 뒤로 또는 닫히고 탭을 다시 열 수 있습니다. 세션 전용으로 간주되는 변수 및 데이터는 여전히 사용할 수 있습니다.
    1. JavaScript 변수

    메트릭

    지침 용량은 엄격하게 제한되지 않지만 메모리를 채우면 브라우저가 느려지거나 충돌 할 수 있습니다. 읽기/쓰기 속도는 가장 빠른 옵션은 지속성이 좋지 않습니다. 브라우저에서 데이터가 새로 고침되고 JavaScript 변수에 상태를 저장하도록 지우는 것이 가장 빠르고 쉬운 옵션입니다. 나는 당신이 모범이 필요하지 않다고 생각하지만 ... 프로 : 사용하기 쉬운

    Quick 직렬화 또는 사제화가 필요하지 않습니다 <code class="language-javascript">const a = 1, b = 'two', state = { msg: 'Hello', name: 'Craig' };</code>

    단점 :

    Frustile : 새로 고침 또는 닫으면 탭이 모두 제거됩니다. 타사 스크립트는 글로벌 (창) 값을 확인하거나 재정의 할 수 있습니다
      당신은 이미 변수를 사용하고 있습니다. 페이지가 설치되지 않으면 가변 상태의 영구 저장을 고려할 수 있습니다.
    • dom 노드 스토리지
      • 표시기

    지침

    용량은 엄격하게 제한되지 않지만 많은 양의 데이터가 빠르게 읽거나 쓰는 데 적합하지 않습니다. 다른 스크립트로 새로 고침되거나 새로 고침 된 대부분의 DOM 요소 (페이지 또는 메모리)는 이름이 지정된 속성에 값을 저장할 수 있습니다. 데이터와 접두사 이름 속성 이름을 사용하는 것이 더 안전합니다.
      속성에는 html 기능이 관련이 없습니다 더 긴 .setAttribute () 및 .getAttribute () 메소드 대신 데이터 세트 속성을 통해 값에 액세스 할 수 있습니다.
      • 값은 문자열로 저장되므로 직렬화 및 사막화가 필요할 수 있습니다. 예를 들면 :
    프로 :

    javaScript 또는 html에서 값을 정의 할 수 있습니다 - 예를 들어 . 는 특정 구성 요소의 상태를 저장하는 데 도움이됩니다 dom은 빠릅니다! (대중적인 의견과는 반대로)

      단점 :
    1. FRATHILE : 새로 고침 또는 닫기 탭이 모든 것을 지울 것입니다 (값이 서버에 의해 값이 HTML로 렌더링되지 않는 한)

      <:> 문자열 전용 : 직렬화 및 사막화가 필요합니다 더 큰 DOM은 성능에 영향을 미칩니다

      타사 스크립트는 값을 확인하거나 덮어 쓸 수 있습니다
      2. DOM 노드는 변수보다 느리게 저장합니다. HTML에 구성 요소의 상태를 저장하는 것이 유용 할 때주의해서 사용하십시오.

    웹 스토리지 (LocalStorage and SessionStorage) indicator 지침

    용량 5MB 읽기/쓰기 속도 동기 동기화 : 느리게 유지 될 수 있습니다. 이름/값 쌍을 정의합니다. 사용 : <.>
      ssessionStorage 브라우저 탭이 열려있는 동안 세션 전용 데이터를 유지합니다 (그러나 데이터 지속성 참조)
    1. 를 사용하여 이름을 지정하거나 업데이트하십시오
      2. .getItem () : 를 사용하여 검색합니다
    .removeItem ()로 삭제하십시오

    다른 속성 및 방법에는 다음이 포함됩니다

      <: :> .length : 저장된 항목의 수
    • .key (n) : nth 키의 이름 .clear () : 저장된 모든 항목 를 삭제합니다
      • 모든 값을 변경하면 동일한 도메인에 연결된 다른 브라우저 탭/창에서 스토리지 이벤트가 발생합니다. 응용 프로그램은 다음과 같이 응답 할 수 있습니다
      • 프로 :
    • 간단한 이름/값 쌍 api 세션 및 영구 스토리지 옵션 좋은 브라우저 지원

    단점 :

    <:> 문자열 전용 : 직렬화 및 사막화가 필요합니다 트랜잭션, 인덱스 또는 검색이없는 구조화되지 않은 데이터 <code class="language-javascript">const a = 1, b = 'two', state = { msg: 'Hello', name: 'Craig' };</code> 동기 액세스는 대형 데이터 세트의 성능 에 영향을 미칩니다

    웹 스토리지는 더 간단하고 작고 일시적인 값에 적합합니다. 많은 양의 구조화 된 정보를 저장하는 데 적합하지는 않지만 페이지를 내릴 때 데이터를 작성하여 성능 문제를 피할 수 있습니다.

    • indexeddb
    • 표시기
    지시 사항

    용량은 장비에 따라 다릅니다. 적어도 1GB이지만 나머지 디스크 공간의 최대 60%가 읽기/쓰기 속도 빠른 지속성 데이터가 제거 될 때까지 남아 있습니다. INDEXEDDB는 많은 양의 데이터를 저장하기 위해 NOSQL과 유사한 저수준 API를 제공합니다. 상점을 색인화하고 거래를 사용하여 업데이트 할 수 있으며 비동기 방법을 사용하여 검색 할 수 있습니다.
      indexeddb API는 복잡하며 일부 이벤트 처리가 필요합니다. 다음 함수는 이름, 버전 번호 및 선택적 업그레이드 기능을 전달할 때 데이터베이스 연결을 열어줍니다 (버전 번호가 변경 될 때 호출) :
    • 다음 코드는 MyDB 데이터베이스에 연결되어 Todo Object Store (SQL 테이블 또는 MongoDB 컬렉션과 유사)를 초기화합니다. 그런 다음 id :
      • 라는 자동 증가 키를 정의합니다
    • DB 연결이 준비되면 트랜잭션에서 새 데이터 항목을 추가 할 수 있습니다.
      • 첫 번째 항목과 같은 값을 검색 할 수 있습니다.
      • 프로 :
    최대 공간을 갖춘 유연한 데이터 저장 강력한 트랜잭션, 인덱스 및 검색 옵션

    좋은 브라우저 지원
    1. 단점 :

      복잡한 콜백 및 이벤트 기반 API

      2. indexeddb는 다량의 데이터를 안정적인 저장을위한 최상의 선택이지만 IDB, dexie.js 또는 jsstore와 같은 래퍼 라이브러리를 사용해야합니다.

    캐시 API indicatator 지침

    용량은 장치에 따라 다르지만 Safari는 각 도메인을 50MB의 읽기/쓰기 속도로 제한합니다. 2 주 후에 Safari에서 HTTP 요청 및 응답 객체 쌍을위한 스토리지를 제공합니다. 여러 네트워크 데이터 항목을 저장하려는만큼 많은 이름의 캐시를 만들 수 있습니다.

    이 API는 일반적으로 서비스 작업자에게 점진적인 웹 응용 프로그램에 대한 네트워크 응답을 캐시하는 데 사용됩니다. 장치가 네트워크에서 분리되면 캐시 된 자산을 재발하여 웹 응용 프로그램이 오프라인으로 실행될 수 있습니다.

    다음 코드는 MyCache라는 캐시에 네트워크 응답을 저장합니다.
    <code class="language-javascript">const
  a = 1,
  b = 'two',
  state = {
    msg:  'Hello',
    name: 'Craig'
  };</code>
    유사한 기능은 캐시에서 항목을 검색 할 수 있습니다. 이 예에서는 응답 본문 텍스트를 반환합니다.

    프로 : 
    <code class="language-javascript">// 定位<main>元素
</main>const main = document.querySelector('main');

// 存储值
main.dataset.value1 = 1;
main.dataset.state = JSON.stringify({ a:1, b:2 });

// 检索值
console.log( main.dataset.value1 ); // "1"
console.log( JSON.parse(main.dataset.state).a ); // 1</code>
    네트워크 응답을 저장 는 웹 애플리케이션의 성능을 향상시킬 수 있습니다 웹 애플리케이션이 오프라인으로 실행되도록 허용합니다 현대 약속 기반 API
      단점 :
    • 응용 프로그램 상태를 저장하는 데 적합하지 않습니다 는 프로그레시브 웹 응용 프로그램 외부에서 덜 유용 할 수 있습니다 Apple은 PWA 및 Cache API에 친숙하지 않습니다
      • 캐시 API는 네트워크에서 검색된 파일 및 데이터를 저장하는 데 가장 적합한 선택입니다. 응용 프로그램 상태를 저장하는 데 사용할 수 있지만이 목적을 위해 설계되지 않았으며 더 나은 옵션이 있습니다.
    • 5.5 AppCache
      • AppCache는 만료 된 캐시 API의 전임자입니다. 이것은 당신이 찾고있는 스토리지 솔루션이 아닙니다. 여기서 볼 좋은 것은 없습니다. 떠나십시오.
    • 파일 시스템 액세스 API

    메트릭

위 내용은 10 클라이언트 측 스토리지 옵션 및 사용시기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript sql mysql firefox chrome safari html date Cookie 字符串 存储类 Length 线程 主线程 JS 对象 事件 dom promise 异步 mongodb postgresql nosql 数据库 http https microsoft
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：AWS, Google Cloud 및 Azure의 나란히 비교다음 기사：AWS, Google Cloud 및 Azure의 나란히 비교

관련 기사

더보기