Bước 6: Xuất việc cần làm sang hệ thống tệp

Trong bước này, bạn sẽ tìm hiểu:

  • Cách lấy thông tin tham chiếu đến một tệp trong hệ thống tệp bên ngoài.
  • Cách ghi vào hệ thống tệp.

Thời gian ước tính để hoàn tất bước này: 20 phút.
Để xem trước những việc bạn sẽ hoàn thành trong bước này, hãy chuyển xuống cuối trang này ↓.

Xuất việc cần làm

Bước này thêm một nút xuất vào ứng dụng. Khi bạn nhấp vào, các mục việc cần làm hiện tại sẽ được lưu thành một văn bản tệp do người dùng chọn. Nếu tệp tồn tại, tệp đó sẽ được thay thế. Nếu không, một tệp mới sẽ được tạo.

Cập nhật quyền

Bạn có thể yêu cầu quyền hệ thống tệp dưới dạng một chuỗi cho quyền truy cập chỉ đọc hoặc Đối tượng có quyền truy cập chỉ đọc các thuộc tính bổ sung. Ví dụ:

// Read only
"permissions": ["fileSystem"]

// Read and write
"permissions": [{"fileSystem": ["write"]}]

// Read, write, autocomplate previous input, and select folder directories instead of files
"permissions": [{"fileSystem": ["write", "retainEntries", "directory"]}]

Bạn cần có quyền đọc và ghi. Trong tệp manifest.json, hãy yêu cầu {fileSystem: [ "write" ] } quyền:

"permissions": [
  "storage", 
  "alarms", 
  "notifications", 
  "webview",
  "<all_urls>", 
  { "fileSystem": ["write"] } 
],

Cập nhật chế độ xem HTML

Trong index.html, hãy thêm nút Export to dis (Xuất sang ổ đĩa) và div để ứng dụng cho thấy thông báo trạng thái:

<footer id="info">
  <button id="toggleAlarm">Activate alarm</button>
  <button id="exportToDisk">Export to disk</button>
  <div id="status"></div>
  ...
</footer>

Ngoài ra trong index.html, hãy tải tập lệnh export.js:

...
<script src="js/alarms.js"></script>
<script src="js/export.js"></script>

Tạo tập lệnh xuất

Tạo tệp JavaScript mới có tên export.js bằng cách sử dụng mã bên dưới. Lưu tệp này vào thư mục js.

(function() {

  var dbName = 'todos-vanillajs';

  var savedFileEntry, fileDisplayPath;

  function getTodosAsText(callback) {
  }

  function exportToFileEntry(fileEntry) {
  }

  function doExportToDisk() {
  }

  document.getElementById('exportToDisk').addEventListener('click', doExportToDisk);

})();

Hiện tại, export.js chỉ chứa một trình nghe lượt nhấp trên nút Export to dis (Xuất sang ổ đĩa) và các mã giả lập cho getTodosAsText(), exportToFileEntry và doExportToDisk().

Nhận các mục việc cần làm dưới dạng văn bản

Cập nhật getTodosAsText() để đọc việc cần làm từ chrome.storage.local và tạo văn bản biểu diễn:

function getTodosAsText(callback) {
  chrome.storage.local.get(dbName, function(storedData) {
    var text = '';

    if ( storedData[dbName].todos ) {
      storedData[dbName].todos.forEach(function(todo) {
          text += '- ';
          if ( todo.completed ) {
            text += '[DONE] ';
          }
          text += todo.title;
          text += '\n';
        }, '');
    }

    callback(text);

  }.bind(this));
}

Chọn tệp

Cập nhật doExportToDisk() bằng chrome.fileSystem.chooseEntry() để cho phép người dùng chọn tệp:

function doExportToDisk() {

  if (savedFileEntry) {

    exportToFileEntry(savedFileEntry);

  } else {

    chrome.fileSystem.chooseEntry( {
      type: 'saveFile',
      suggestedName: 'todos.txt',
      accepts: [ { description: 'Text files (*.txt)',
                   extensions: ['txt']} ],
      acceptsAllTypes: true
    }, exportToFileEntry);

  }
}

Tham số đầu tiên của chrome.fileSystem.chooseEntry() là một đối tượng của các tuỳ chọn. Thứ hai là một phương thức gọi lại.

Nếu đã có FileEntry đã lưu, hãy sử dụng mã đó khi gọi exportToFileEntry(). Tệp tham chiếu tồn tại trong toàn thời gian của đối tượng biểu thị FileEntry. Ví dụ này liên kết FileEntry vào cửa sổ ứng dụng để mã JavaScript có thể ghi vào tệp đã chọn mà không cần bất kỳ người dùng nào của người dùng miễn là cửa sổ ứng dụng vẫn mở.

Sử dụng FileEntry để ghi các mục việc cần làm vào ổ đĩa

Cập nhật exportToFileEntry() để lưu việc cần làm dưới dạng văn bản thông qua API Web FileEntry:

function exportToFileEntry(fileEntry) {
  savedFileEntry = fileEntry;

  var status = document.getElementById('status');

  // Use this to get a file path appropriate for displaying
  chrome.fileSystem.getDisplayPath(fileEntry, function(path) {
    fileDisplayPath = path;
    status.innerText = 'Exporting to '+path;
  });

  getTodosAsText( function(contents) {

    fileEntry.createWriter(function(fileWriter) {

      var truncated = false;
      var blob =