Cordova - Hệ thống tệp
Plugin này được sử dụng để điều khiển hệ thống tệp gốc trên thiết bị của người dùng.
Bước 1 - Cài đặt Trình cắm tệp
Chúng ta cần chạy đoạn mã sau trong command prompt để cài đặt plugin này.
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file
Bước 2 - Thêm các nút
Trong ví dụ này, chúng tôi sẽ hướng dẫn bạn cách tạo tệp, ghi vào tệp, đọc và xóa tệp. Vì lý do này, chúng tôi sẽ tạo bốn nút trongindex.html. Chúng tôi cũng sẽ thêmtextarea trong đó, nội dung của tệp của chúng tôi sẽ được hiển thị.
<button id = "createFile">CREATE FILE</button>
<button id = "writeFile">WRITE FILE</button>
<button id = "readFile">READ FILE</button>
<button id = "removeFile">DELETE FILE</button>
<textarea id = "textarea"></textarea>
Bước 3 - Thêm người nghe sự kiện
Chúng tôi sẽ thêm event listeners trong index.js bên trong onDeviceReady chức năng để đảm bảo rằng mọi thứ đã bắt đầu trước khi plugin được sử dụng.
document.getElementById("createFile").addEventListener("click", createFile);
document.getElementById("writeFile").addEventListener("click", writeFile);
document.getElementById("readFile").addEventListener("click", readFile);
document.getElementById("removeFile").addEventListener("click", removeFile);
Bước 4A - Chức năng Tạo tệp
Tệp sẽ được tạo trong thư mục gốc ứng dụng trên thiết bị. Để có thể truy cập vào thư mục gốc bạn cần cung cấpsuperusertruy cập vào các thư mục của bạn. Trong trường hợp của chúng tôi, đường dẫn đến thư mục gốc là\data\data\com.example.hello\cache. Hiện tại thư mục này trống.
Bây giờ chúng ta hãy thêm một hàm sẽ tạo tệp log.txt. Chúng tôi sẽ viết mã này trongindex.jsvà gửi yêu cầu đến hệ thống tệp. Phương pháp này sử dụng WINDOW.TEMPORARY hoặc WINDOW.PERSISTENT. Kích thước cần thiết để lưu trữ được tính bằng byte (trong trường hợp của chúng tôi là 5MB).
function createFile() {
var type = window.TEMPORARY;
var size = 5*1024*1024;
window.requestFileSystem(type, size, successCallback, errorCallback)
function successCallback(fs) {
fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) {
alert('File creation successfull!')
}, errorCallback);
}
function errorCallback(error) {
alert("ERROR: " + error.code)
}
}
Bây giờ chúng ta có thể nhấn CREATE FILE và cảnh báo sẽ xác nhận rằng chúng tôi đã tạo tệp thành công.
Bây giờ, chúng tôi có thể kiểm tra lại thư mục gốc của ứng dụng và chúng tôi có thể tìm thấy tệp mới của mình ở đó.
Bước 4B - Viết hàm tệp
Trong bước này, chúng tôi sẽ ghi một số văn bản vào tệp của chúng tôi. Chúng tôi sẽ lại gửi một yêu cầu đến hệ thống tệp và sau đó tạo trình ghi tệp để có thể ghiLorem Ipsum văn bản mà chúng tôi đã chỉ định cho blob Biến đổi.
function writeFile() {
var type = window.TEMPORARY;
var size = 5*1024*1024;
window.requestFileSystem(type, size, successCallback, errorCallback)
function successCallback(fs) {
fs.root.getFile('log.txt', {create: true}, function(fileEntry) {
fileEntry.createWriter(function(fileWriter) {
fileWriter.onwriteend = function(e) {
alert('Write completed.');
};
fileWriter.onerror = function(e) {
alert('Write failed: ' + e.toString());
};
var blob = new Blob(['Lorem Ipsum'], {type: 'text/plain'});
fileWriter.write(blob);
}, errorCallback);
}, errorCallback);
}
function errorCallback(error) {
alert("ERROR: " + error.code)
}
}
Sau khi nhấn WRITE FILE , cảnh báo sẽ thông báo cho chúng tôi rằng việc ghi thành công như trong ảnh chụp màn hình sau.
Bây giờ chúng ta có thể mở log.txt và thấy rằng Lorem Ipsum được viết bên trong.
Bước 4C - Đọc chức năng tệp
Trong bước này, chúng tôi sẽ đọc tệp log.txt và hiển thị nó trong textareathành phần. Chúng tôi sẽ gửi một yêu cầu đến hệ thống tệp và lấy đối tượng tệp, sau đó chúng tôi sẽ tạoreader. Khi trình đọc được tải, chúng tôi sẽ gán giá trị trả về chotextarea.
function readFile() {
var type = window.TEMPORARY;
var size = 5*1024*1024;
window.requestFileSystem(type, size, successCallback, errorCallback)
function successCallback(fs) {
fs.root.getFile('log.txt', {}, function(fileEntry) {
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function(e) {
var txtArea = document.getElementById('textarea');
txtArea.value = this.result;
};
reader.readAsText(file);
}, errorCallback);
}, errorCallback);
}
function errorCallback(error) {
alert("ERROR: " + error.code)
}
}
Khi chúng tôi nhấp vào READ FILE nút, văn bản từ tệp sẽ được viết bên trong textarea.
Bước 4D - Xóa chức năng tệp
Và cuối cùng, chúng tôi sẽ tạo chức năng xóa log.txt tập tin.
function removeFile() {
var type = window.TEMPORARY;
var size = 5*1024*1024;
window.requestFileSystem(type, size, successCallback, errorCallback)
function successCallback(fs) {
fs.root.getFile('log.txt', {create: false}, function(fileEntry) {
fileEntry.remove(function() {
alert('File removed.');
}, errorCallback);
}, errorCallback);
}
function errorCallback(error) {
alert("ERROR: " + error.code)
}
}
Bây giờ chúng ta có thể nhấn DELETE FILEđể xóa tệp khỏi thư mục gốc ứng dụng. Cảnh báo sẽ thông báo cho chúng tôi rằng thao tác xóa đã thành công.
Nếu chúng tôi kiểm tra thư mục gốc của ứng dụng, chúng tôi sẽ thấy rằng nó trống.