HTML5-웹 스토리지 API에 대한 간략한 설명

1. 개요
웹 스토리지는 클라이언트 측에 데이터를 저장하는 방식입니다. 쿠키에 비해 웹 저장소는 문자열뿐만 아니라 더 많은 객체를 저장할 수 있고 더 안전합니다. 웹 스토리지는 몇 KB의 데이터만 저장할 수 있는 쿠키 대신 클라이언트와 서버 간의 데이터 변환을 줄여 대역폭을 줄일 수도 있습니다.
Web Storage의 핵심은 window 객체의 두 하위 객체인 sessionStorage와 localStorage입니다. 데이터는 이 두 객체를 통해 키-값 쌍의 형태로 저장됩니다. 두 객체 모두 스토리지인터페이스를 구현하고 동일한 이름의 속성과 메서드를 가지며 동일한 사용법을 갖습니다. 차이점은 둘의 저장 시간과 공유 범위입니다.
sessionStorage 데이터의 저장 시간은 해당 데이터가 저장된 브라우저 창이나 탭의 존재 시간에 따라 달라지며, 공유 범위는 생성된 브라우저 창이나 탭 내에서만 가능합니다.
localStorage 데이터의 저장 시간은 브라우저가 열리는 시간을 초과합니다. 수동으로 또는 코드를 통해 삭제하지 않는 한 공유 범위는 동일한 원본 웹 사이트의 페이지 사이입니다.
많은 브라우저가 로컬 파일 시스템에 대한 sessionStorage 액세스를 지원하지 않으므로 웹 서버를 통해 사용해야 합니다.
Web Storage의 사양은 모든 유형의 데이터 저장을 허용하지만 각 브라우저 구현에서 대부분의 값은 문자열 텍스트 데이터의 저장을 허용하지만 JSON과 결합하여 Web Storage를 사용할 수 있습니다. 텍스트가 아닌 데이터를 저장하는 기술.
더욱 발전된 데이터 저장 방식은 인덱스 기반의 데이터베이스 저장을 위한 Web SQL Database로, SQL 쿼리 언어인 SQLite가 있습니다. Web SQL Database는 현재 Safari, Chrome 및 Opera에서만 지원됩니다. 최종 사양에서는 이 접근 방식을 사용하지 않을 가능성이 높습니다. 또 다른 방법은 FireFox 4 이상에서만 지원되는 IndexedDB입니다.

2. 브라우저 지원 감지

 function checkStorageSupport() { 
  //sessionStorage 
  
if
 (window.sessionStorage) { 
    alert('This browser supports sessionStorage'); 
  } 
else
 { 
    alert('This browser does NOT support sessionStorage'); 
  } 
  //localStorage 
  if (window.localStorage) { 
    alert('This browser supports localStorage'); 
  } else { 
    alert('This browser does NOT support localStorage'); 
  } 
}

3.스토리지 인터페이스

  interface Storage { 
     //同源键值对的数目
     readonly attribute unsigned long length; 
     //通过索引获取键，索引从0开始
     getter DOM
String
 
key
(in unsigned long index); 
     //通过键获取值，键若不存在，值将返回
null
     getter any getItem(in DOMString key); 
     //存储键值对，若已存在同名键，则值将被覆盖。若用户关闭了浏览器存储或是已超     //过允许存储的最大值，都将产生QUOTA_EXCEEDED_ERR错误。
     
set
ter creator void setItem(in DOMString key, in any data); 
     //通过键删除值，不存在则什么也不做
     
delete
r void removeItem(in DOMString key); 
     //删除storage中所有键值对，若为空则什么也不做
     void 
clear
(); 
   };

4. 데이터 읽기 및 저장

  //---------------方式一--------------
   //存储数据
   window.sessionStorage.setItem(‘myFirstKey’, ‘myFirstValue’); 
   //读取数据
   alert(window.sessionStorage.getItem(‘myFirstKey’)); 
   //---------------方式二--------------
   //存储数据
   window.sessionStorage.myFirstKey = ‘myFirstValue’;
   //读取数据
   alert(window.sessionStorage.myFirstKey); 
   //---------------方式三--------------
   var varKey = sessionStorage.key(index);
   window.sessionStorage[varKey] = 
new
Value;

5. 스토리지 이벤트
스토리지 이벤트를 통해 웹 스토리지와 다른 페이지, 브라우저 창이나 탭, Web Worker 간의 통신을 수행할 수 있습니다. 동일한 출처의 객체는 스토리지 이벤트를 수신할 수 있습니다. 다음과 같이 스토리지 이벤트 수신 메소드를 추가합니다.

  window.addEventListener("storage", displayStorageEvent, true);

6. StorageEvent 인터페이스
스토리지 이벤트 객체는 StorageEvent 인터페이스를 구현합니다.

 interface StorageEvent : Event { 
      readonly attribute DOMString key; 
      readonly attribute any oldValue; 
      readonly attribute any newValue; 
      readonly attribute DOMString url; 
      //该方法提供了一个对发生storage事件对象的
引用
，这个对象可以是
      //sessionStorage或localStorage
      readonly attribute Storage storageArea;
   };

6. 최대 할당량 처리
대부분의 브라우저에서는 데이터 저장 시 할당량 제한을 초과하지 않도록 QUOTA_EXCEEDED_ERR 예외를 잡는 방법을 사용하여 처리할 수 있습니다. , 예:

try
   {
      sessionStorage["name"] = "Tabatha";
   }
   catch (
exception
)
   {
      if (exception == QUOTA_EXCEEDED_ERR)
      { 
         // we should tell the user their quota has been exceeded. 
      }
   }

위 내용은 HTML5-웹 스토리지 API에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!