Storage API

앱 개발의 거의 모든 측면에는 데이터를 보내거나 받는 일부 요소가 관련됩니다. 시작 중 MVC 프레임워크를 사용하여 앱을 설계하고 구현하는 데 도움을 주어야 합니다. 데이터는 해당 데이터에 대한 앱의 뷰와 완전히 별개입니다 (MVC 아키텍처 참고).

앱이 오프라인일 때 데이터를 처리하는 방식도 고려해야 합니다 (오프라인 우선 참고). 이 문서에서는 데이터를 로컬에서 전송, 수신, 저장하기 위한 스토리지 옵션을 간략하게 소개합니다. 이 문서의 나머지 부분에서는 Chrome의 파일 시스템 및 동기화 파일 시스템 API를 사용하는 방법을 설명합니다. fileSystem API 및 syncFileSystem API)을 제공합니다.

스토리지 옵션

패키지 앱은 데이터를 주고받는 데 다양한 메커니즘을 사용합니다. 외부 데이터 (리소스, 콘텐츠 보안 정책 (CSP)을 숙지해야 합니다. Chrome과 유사 확장 프로그램의 경우 교차 출처 XMLHttpRequests를 사용하여 원격 서버와 통신할 수 있습니다. 나 앱의 나머지 부분이 안전하도록 외부 페이지를 격리할 수도 있습니다 (외부 웹 삽입 페이지 참조).

데이터를 로컬에 저장할 때 Chrome Storage API를 사용하여 소량의 문자열을 저장할 수 있습니다. IndexedDB를 사용하여 구조화된 데이터를 저장합니다. IndexedDB를 사용하면 JavaScript 객체를 개체 저장소를 만들고 매장의 색인을 사용하여 데이터를 쿼리합니다 (자세한 내용은 HTML5 Rock의 Simple Todo 참조). 목록 튜토리얼 참조). 바이너리 데이터와 같은 기타 모든 유형의 데이터에는 파일 시스템 및 동기화를 사용합니다. 파일 시스템 API.

Chrome의 파일 시스템 및 동기화 파일 시스템 API는 HTML5 파일 시스템 API를 확장합니다. Chrome의 경우 File System API를 사용하면 앱에서 사용자 파일의 샌드박스 처리된 섹션을 만들고 읽고 탐색하고 여기에 쓸 수 있습니다. 로컬 파일 시스템입니다. 예를 들어 사진 공유 앱은 Filesystem API를 사용하여 사용자가 선택한 사진입니다.

Chrome의 Sync Filesystem API를 사용하면 앱이 사용자의 Google 드라이브에 데이터를 저장하고 동기화할 수 있으므로 동일한 데이터를 여러 클라이언트에서 사용할 수 있습니다. 예를 들어 클라우드 지원 텍스트는 편집기 앱은 새 텍스트 파일을 사용자의 Google Drive 계정에 자동으로 동기화할 수 있습니다. 이 사용자가 새 클라이언트에서 텍스트 편집기를 열면 Google Drive가 새 텍스트 파일을 살펴보겠습니다

Chrome Filesystem API 사용

파일 시스템 권한 추가

Chrome의 File System API를 사용하려면 'fileSystem' 권한을 부여하지 않기 때문에 사용자로부터 영구 데이터를 저장할 권한을 얻을 수 있습니다.

"permissions": [
  "...",
  "fileSystem"
]

파일 선택을 위한 사용자 옵션

사용자는 평소와 같은 방식으로 파일을 선택하기를 기대합니다. 사용자는 최소한 '선택적' 파일' 버튼, 표준 파일 선택기 등이 있습니다. 앱에서 파일 처리를 많이 사용하는 경우에도 드래그 앤 드롭을 구현합니다 (아래 참조 및 기본 HTML5 드래그 앤 드롭 참조).

fileEntry의 경로 가져오기

사용자가 선택한 파일의 전체 경로 fileEntry를 가져오려면 getDisplayPath()를 호출합니다.

function displayPath(fileEntry) {
  chrome.fileSystem.getDisplayPath(fileEntry, function(path) {
    console.log(path)
  });
}

드래그 앤 드롭 구현

드래그 앤 드롭 선택을 구현해야 하는 경우 다음 위치에 있는 드래그 앤 드롭 파일 컨트롤러 (dnd.js)를 사용하세요. filesystem-access 샘플부터 시작하는 것이 좋습니다. 컨트롤러는 파일 항목을 생성 드래그 앤 드롭을 통해 DataTransferItem에서 가져올 수 있습니다. 이 예에서 fileEntry는 첫 번째 있습니다.

var dnd = new DnDFileController('body', function(data) {
  var fileEntry = data.items[0].webkitGetAsEntry();
  displayPath(fileEntry);
});

파일 읽기

다음 코드는 파일을 읽기 전용으로 열고 FileReader 객체를 사용하여 텍스트로 읽습니다. 만약 파일이 존재하지 않으면 오류가 발생합니다.

var chosenFileEntry = null;

chooseFileButton.addEventListener('click', function(e) {
  chrome.fileSystem.chooseEntry({type: 'openFile'}, function(readOnlyEntry) {

    readOnlyEntry.file(function(file) {
      var reader = new FileReader();

      reader.onerror = errorHandler;
      reader.onloadend = function(e) {
        console.log(e.target.result);
      };

      reader.readAsText(file);
    });
    });
});

파일 쓰기

파일 작성의 두 가지 일반적인 사용 사례는 '저장'입니다. '다른 이름으로 저장'을 선택합니다. 다음 코드는 읽기 전용 chosenFileEntry에서 writableEntry를 생성하고 선택한 파일을 여기에 씁니다.

 chrome.fileSystem.getWritableEntry(chosenFileEntry, function(writableFileEntry) {
    writableFileEntry.createWriter(function(writer) {
      writer.onerror = errorHandler;
      writer.onwriteend = callback;

    chosenFileEntry.file(function(file) {
      writer.write(file);
    });
  }, errorHandler);
});

다음 코드는 '다른 이름으로 저장'을 사용하여 새 파일을 만듭니다. 새 blob을 writer.write() 메서드를 사용하여 파일을 삭제할 수 있습니다.

chrome.fileSystem.chooseEntry({type: 'saveFile'}, function(writableFileEntry) {
    writableFileEntry.createWriter(function(writer) {
      writer.onerror = errorHandler;
      writer.onwriteend = function(e) {
        console.log('write complete');
      };
      writer.write(new Blob(['1234567890'], {type: 'text/plain'}));
    }, errorHandler);
});

Chrome Sync Filesystem API 사용

동기화 가능한 파일 저장소를 사용하여 반환된 데이터 객체를 로컬과 동일한 방식으로 작동할 수 있음 FileSystem API의 오프라인 파일 시스템 및 해당 동기화에 대한 추가 (자동) 동기화 포함 데이터를 Google Drive에 저장합니다.

파일 시스템 동기화 권한 추가

Chrome의 Sync Filesystem API를 사용하려면 'syncFileSystem' 다음에 대한 권한 영구 데이터를 저장하고 동기화할 수 있는 권한을 사용자로부터 얻을 수 있습니다.

"permissions": [
  "...",
  "syncFileSystem"
]

동기화 가능한 파일 저장 시작

앱에서 동기화 가능한 파일 저장소를 시작하려면 syncFileSystem.requestFileSystem을 호출하면 됩니다. 이 메서드는 Google Drive에서 지원하는 동기화 가능한 파일 시스템을 반환합니다. 예를 들면 다음과 같습니다.

chrome.syncFileSystem.requestFileSystem(function (fs) {
   // FileSystem API should just work on the returned 'fs'.
   fs.root.getFile('test.txt', {create:true}, getEntryCallback, errorCallback);
});

파일 동기화 상태 정보

syncFileSystem.getFileStatus를 사용하여 현재 파일의 동기화 상태를 가져옵니다.

chrome.syncFileSystem.getFileStatus(entry, function(status) {...});

파일 동기화 상태 값은 'synced', 'pending', 'conflicting' 중 하나일 수 있습니다. '동기화됨' 파일이 완전히 동기화되었음을 의미합니다. 아직 검토되지 않은 대기 중인 로컬 변경사항이 Google Drive에 동기화됩니다. 하지만 Google Drive에 보류 중인 변경사항이 있을 수 있으며 가져올 수 없습니다

'대기중' 아직 Google Drive에 동기화되지 않은 대기 중인 변경사항이 있다는 의미입니다. 앱이 다음과 같은 경우 로컬 변경사항이 Google 드라이브에 즉시 동기화되며 syncFileSystem.onFileStatusChanged 이벤트가 시작되고 'synced' 상태로 실행됩니다 (아래 참조 참조하세요.

파일 상태가 다음으로 변경되면 syncFileSystem.onFileStatusChanged가 실행됩니다. 'conflicting'입니다. '충돌' 로컬 스토리지와 Google Drive 충돌 해결 정책이 'manual' 기본 정책은 'last_write_win'이며 충돌은 다음 날짜까지 자동으로 해결됩니다. 간단한 마지막 쓰기 낙찰 정책입니다. 시스템의 충돌 해결 정책은 syncFileSystem.setConflictResolutionPolicy.

충돌 해결 정책이 'manual'로 설정되어 있고 파일의 상태가 'conflicting'이면 앱은 여전히 파일을 로컬 오프라인 파일로 읽고 쓸 수 있지만 변경사항은 동기화되지 않습니다. 이 파일은 충돌이 문제가 해결되었습니다 충돌을 해결하는 가장 쉬운 방법은 파일의 로컬 버전을 삭제하거나 이름을 바꾸는 것입니다. 이렇게 하면 원격 버전이 동기화되고 충돌 상태가 해결되고 onFileStatusChanged 이벤트는 'synced' 상태로 시작됩니다.

동기화 상태의 변경사항 수신 대기

syncFileSystem.onFileStatusChanged 이벤트는 파일의 동기화 상태가 변경되면 실행됩니다. 예를 들어, 파일에 대기 중인 변경사항이 있고 '대기 중' 상태라고 가정해 보겠습니다. 있습니다. 앱이 동기화하려고 합니다. 동기화 서비스가 Google Drive에 변경사항을 업로드하면 서비스가 다음 값을 포함하는 onFileStatusChanged 이벤트: { fileEntry:a fileEntry for the file, status: 'synced', action: 'updated', direction: 'local_to_remote' }

마찬가지로, 로컬 액티비티와 상관없이 동기화 서비스는 Google Drive에서 로컬 저장소로 변경사항을 다운로드합니다. 리모컨이 새 파일을 추가하기 위한 변경이면 다음 값을 가진 이벤트가 실행됩니다. { fileEntry: a fileEntry for the file, status: 'synced', action: 'added', direction: 'remote_to_local' }

로컬 측과 원격 측 모두에 동일한 파일의 변경사항이 충돌하고 해결 정책이 'manual'(으)로 설정되면 파일 상태가 conflicting 상태로 변경되고 동기화 서비스에서 분리되며 충돌이 해결될 때까지 동기화되지 않습니다. 이 다음 값을 가진 이벤트가 시작됩니다. { fileEntry: a fileEntry for the file, status: 'conflicting', action: null, direction: null }

상태 변경에 응답하는 리스너를 이 이벤트에 추가할 수 있습니다. 예를 들어 Chrome 뮤직 플레이어 앱이 Google 드라이브에서 동기화된 모든 새 음악을 듣지만, 아직은 듣지 않습니다. 특정 클라이언트의 로컬 스토리지로 가져올 수 있습니다. 찾은 음악이 해당 음악에 동기화됩니다. 클라이언트:

chrome.syncFileSystem.onFileStatusChanged.addListener(function(fileInfo) {
  if (fileInfo.status === 'synced') {
    if (fileInfo.direction === 'remote_to_local') {
      if (fileInfo.action === 'added') {
        db.add(fileInfo.fileEntry);
      } else if (fileInfo.action === 'deleted') {
        db.remove(fileInfo.fileEntry);
      }
    }
  }
});

API 사용량 확인 중

API에서 사용 중인 데이터의 양을 확인하려면 앱의 로컬 샌드박스 디렉터리나 syncFileSystem.getUsageAndQuota에서 반환한 사용량 바이트:

chrome.syncFileSystem.getUsageAndQuota(fileSystem, function (storageInfo) {
   updateUsageInfo(storageInfo.usageBytes);
   updateQuotaInfo(storageInfo.quotaBytes);
});

Google Drive에서 사용자의 동기화 백엔드 서비스 스토리지를 확인할 수도 있습니다. 동기화된 파일은 숨겨진 Google Drive 폴더인 Chrome 동기화 가능한 파일 시스템에 저장됩니다. 폴더가 표시되지 않는 위치: 내 '내 드라이브' 검색창에서 폴더 이름을 검색하여 액세스할 수 있습니다. (참고: 원격 폴더 레이아웃은 버전 간에 하위 호환성을 유지하지 않을 수도 있습니다.)