Lưu giá trị vào tệp văn bản javascript
JavaScript là một trong những ngôn ngữ lập trình phổ biến nhất, chủ yếu là vì nó xử lý giao diện người dùng của các trang web trong khi chạy bên trong trình duyệt. Với những tiến bộ trong tiêu chuẩn web, chúng tôi đã sử dụng nó để hoàn thành ngày càng nhiều tác vụ mà trước đây rất khó hoặc không thể thực hiện chỉ với JavaScript Show Trong hướng dẫn này, bạn sẽ học cách tạo và lưu tệp bằng JavaScript. Chúng tôi sẽ thảo luận về ba kỹ thuật khác nhau mà bạn có thể sử dụng để làm như vậy Sử dụng URL dữ liệu để lưu tệpCách dễ nhất để lưu tệp là sử dụng URL dữ liệu bao gồm tất cả thông tin liên quan. Các URL dữ liệu này là các URL đặc biệt có tiền tố là lược đồ const link = document.querySelector('a.dynamic'); let name = 'Monty'; let text = `My name in ${name}. I love writing tutorials.`; link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); link.setAttribute('download', `${name.toLowerCase()}.txt`);0. Chúng rất lý tưởng để nhúng các tệp nhỏ vào tài liệu HTML của bạn. Các URL này theo cú pháp sau data:[ Mã thông báo const link = document.querySelector('a.dynamic'); let name = 'Monty'; let text = `My name in ${name}. I love writing tutorials.`; link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); link.setAttribute('download', `${name.toLowerCase()}.txt`);1 thực sự là một loại MIME chỉ định bản chất và định dạng của tài liệu hoặc tệp. Giá trị mặc định của nó là const link = document.querySelector('a.dynamic'); let name = 'Monty'; let text = `My name in ${name}. I love writing tutorials.`; link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); link.setAttribute('download', `${name.toLowerCase()}.txt`);2. Mã thông báo const link = document.querySelector('a.dynamic'); let name = 'Monty'; let text = `My name in ${name}. I love writing tutorials.`; link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); link.setAttribute('download', `${name.toLowerCase()}.txt`);3 là tùy chọn và chỉ cần thiết khi bạn muốn lưu trữ dữ liệu nhị phân ở dạng văn bản. Chúng tôi chỉ định dữ liệu thực tế của mình sau tất cả các mã thông báo này Chúng tôi có thể sử dụng thuộc tính Download Text File with Name0 để chỉ định tên của tệp mà chúng tôi muốn đặt tất cả nội dung của mình sau khi tải xuống. Dưới đây là một ví dụ về việc sử dụng tất cả các thuộc tính này cùng nhau Download Text File with Name JavaScript có thể rất hữu ích khi bạn muốn làm cho mọi thứ trở nên năng động. Đây là một ví dụ const link = document.querySelector('a.dynamic'); let name = 'Monty'; let text = `My name in ${name}. I love writing tutorials.`; link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); link.setAttribute('download', `${name.toLowerCase()}.txt`); Chúng tôi bắt đầu bằng cách chọn liên kết của mình bằng phương pháp Download Text File with Name1 và sau đó tạo một loạt các biến để lưu trữ tên tệp và nội dung của nó. Sử dụng mẫu chữ cho phép chúng tôi làm việc với các chuỗi nhiều dòng một cách dễ dàng Chúng tôi tạo URL dữ liệu của mình bằng cách nối siêu dữ liệu với nội dung thực tế được mã hóa bằng hàm Download Text File with Name2. Bản trình diễn CodePen sau đây cho thấy phương pháp lưu tệp văn bản này bằng JavaScript Sử dụng Blobs để tạo và lưu tệpCác đốm màu là các đối tượng giống như tệp trong JavaScript chứa dữ liệu thô. Dữ liệu thô này có thể được đọc dưới dạng văn bản hoặc dưới dạng dữ liệu nhị phân. Trong hướng dẫn này, chúng tôi sẽ sử dụng các đốm màu để tạo và lưu tệp trong JavaScript Chúng ta có thể tạo các đốm màu của riêng mình bằng cách sử dụng hàm tạo Download Text File with Name3, hàm này chấp nhận một mảng các đối tượng cụ thể được đặt bên trong đốm màu. Bạn có thể chuyển loại MIME của dữ liệu dưới dạng cặp khóa-giá trị trong một đối tượng là tham số thứ hai của hàm tạo Download Text File with Name3. Nó là một chuỗi rỗng theo mặc định Chúng ta có thể sửa đổi ví dụ cuối cùng trong phần trước để sử dụng các đốm màu với mã JavaScript sau Chúng tôi tạo Download Text File with Name5 của mình bằng cách gọi hàm tạo Download Text File with Name3 và chuyển biến Download Text File with Name7 của chúng tôi cho nó dưới dạng phần tử mảng. Sau đó, chúng tôi chỉ cần đặt giá trị của các thuộc tính Download Text File with Name8 và Download Text File with Name0. URL trong trường hợp này được tạo bằng cách gọi hàm const link = document.querySelector('a.dynamic'); let name = 'Monty'; let text = `My name in ${name}. I love writing tutorials.`; link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); link.setAttribute('download', `${name.toLowerCase()}.txt`);0, hàm này trả về một chuỗi chứa URL của đối tượng mà chúng ta đã truyền cho nó Hãy tiến thêm một bước nữa và tạo một đốm màu trong đó văn bản được lấy tự động từ phần tử const link = document.querySelector('a.dynamic'); let name = 'Monty'; let text = `My name in ${name}. I love writing tutorials.`; link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); link.setAttribute('download', `${name.toLowerCase()}.txt`);1 trên trang web. Bạn sẽ có thể viết bất cứ thứ gì bạn thích vào const link = document.querySelector('a.dynamic'); let name = 'Monty'; let text = `My name in ${name}. I love writing tutorials.`; link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); link.setAttribute('download', `${name.toLowerCase()}.txt`);1 và sau đó nhấp vào nút Lưu tệp để lưu thành tệp Download Text File with Name7 Chúng tôi bắt đầu bằng cách tham chiếu đến nút của chúng tôi và sau đó lắng nghe các sự kiện nhấp chuột của nó. Sau khi nhấp vào nút, chúng tôi nhận được giá trị của phần tử const link = document.querySelector('a.dynamic'); let name = 'Monty'; let text = `My name in ${name}. I love writing tutorials.`; link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); link.setAttribute('download', `${name.toLowerCase()}.txt`);1 và chuyển đổi nó thành blob. Sau đó, chúng tôi tạo một URL tham chiếu blob của chúng tôi và gán nó cho thuộc tính Download Text File with Name8 của thẻ neo mà chúng tôi đã tạo Bạn có thể dùng thử trong bản demo CodePen sau. Như một bài tập, hãy thử sửa đổi mã để nó lưu tệp với tên do người dùng nhập thay vì tên tĩnh Cách lưu tệp trong một thư mục cụ thể bằng JavaScriptHãy bắt đầu bằng cách loại bỏ câu hỏi này trước. Nói tóm lại, bạn không thể tự ý chọn thư mục lưu tệp trong JavaScript. Chỉ người dùng mới có quyền kiểm soát vị trí lưu tệp Lý do nhà phát triển web không được phép kiểm soát hoàn toàn vị trí lưu tệp bởi trình duyệt liên quan đến bảo mật. Internet sẽ kém an toàn hơn rất nhiều nếu mọi trang web đều có quyền truy cập vào hệ thống tệp trên thiết bị của bạn. Họ có thể đơn giản đưa mã độc vào hệ thống của bạn hoặc xem thông tin cá nhân Trước đó, không thể lưu tệp ở bất kỳ đâu ngoại trừ thư mục tải xuống mặc định, được quyết định bởi cài đặt của trình duyệt chứ không phải các trang web riêng lẻ. Tuy nhiên, API truy cập hệ thống tệp cho phép nhà phát triển đề xuất nơi có thể lưu tệp sau khi họ được người dùng cấp quyền truy cập. Hãy nhớ rằng hỗ trợ trình duyệt rộng hơn hiện đang thiếu API và các trình duyệt hỗ trợ nó chỉ làm như vậy một phần Hãy sửa đổi ví dụ cuối cùng của chúng tôi từ phần trước để tạo và lưu tệp trong JavaScript bằng API truy cập hệ thống tệp Download Text File with Name0 Như thường lệ, chúng tôi bắt đầu bằng cách tạo một đốm màu của Download Text File with Name7 bên trong phần tử const link = document.querySelector('a.dynamic'); let name = 'Monty'; let text = `My name in ${name}. I love writing tutorials.`; link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); link.setAttribute('download', `${name.toLowerCase()}.txt`);1. Chúng tôi tạo một đối tượng chứa các tùy chọn khác nhau cho bộ chọn tệp của chúng tôi hiển thị khi chúng tôi gọi phương thức const link = document.querySelector('a.dynamic'); let name = 'Monty'; let text = `My name in ${name}. I love writing tutorials.`; link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); link.setAttribute('download', `${name.toLowerCase()}.txt`);7. Chúng tôi có thể đề xuất một tên để lưu tệp tại đây và cũng có thể chuyển một loạt các loại tệp được phép lưu. Phương thức này trả về một const link = document.querySelector('a.dynamic'); let name = 'Monty'; let text = `My name in ${name}. I love writing tutorials.`; link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); link.setAttribute('download', `${name.toLowerCase()}.txt`);8 mà chúng ta có thể gọi phương thức const link = document.querySelector('a.dynamic'); let name = 'Monty'; let text = `My name in ${name}. I love writing tutorials.`; link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); link.setAttribute('download', `${name.toLowerCase()}.txt`);9 Phương thức const link = document.querySelector('a.dynamic'); let name = 'Monty'; let text = `My name in ${name}. I love writing tutorials.`; link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); link.setAttribute('download', `${name.toLowerCase()}.txt`);9 tạo luồng có thể ghi và chúng tôi ghi đốm màu mà chúng tôi đã tạo trước đó vào luồng này. Cuối cùng, chúng tôi đóng luồng có thể ghi của mình. Tại thời điểm này, nội dung từ luồng được lưu vào tệp Thử viết gì đó vào const link = document.querySelector('a.dynamic'); let name = 'Monty'; let text = `My name in ${name}. I love writing tutorials.`; link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); link.setAttribute('download', `${name.toLowerCase()}.txt`);1 của CodePen sau, rồi nhấp vào nút Lưu tệp. Bản demo sẽ không hoạt động trong Firefox, vì vậy bạn nên thử sử dụng Chrome hoặc Edge Suy nghĩ cuối cùngTrong hướng dẫn này, chúng ta đã học được ba kỹ thuật tạo và lưu tệp khác nhau trong JavaScript. Hai kỹ thuật đầu tiên yêu cầu chúng tôi tạo các thẻ neo và gán giá trị cho các thuộc tính Download Text File with Name8 và Download Text File with Name0 của chúng. Kỹ thuật cuối cùng liên quan đến việc sử dụng API truy cập hệ thống tệp và cho phép chúng tôi kiểm soát tốt hơn các khía cạnh khác nhau của quy trình như thay đổi vị trí tải xuống mặc định với sự cho phép của người dùng. Tuy nhiên, hiện tại nó không có hỗ trợ trình duyệt đáng kể để sử dụng trong các dự án thực tế Làm cách nào chúng ta có thể lưu trữ dữ liệu đầu vào trong HTML?Thuộc tính giá trị văn bản đầu vào . Thay đổi giá trị của trường văn bản. getElementById("myText"). . Lấy giá trị của một trường văn bản. getElementById("myText"). . Danh sách thả xuống trong một biểu mẫu. var mylist = tài liệu. . Một danh sách thả xuống khác. var no = tài liệu. . Một ví dụ cho thấy sự khác biệt giữa thuộc tính defaultValue và value JavaScript có thể ghi vào đĩa không?Câu trả lời ngắn gọn là không; . Bạn sẽ cần một người trợ giúp để làm điều đó. Ví dụ: TiddlyWiki là một công cụ wiki chỉ là một tệp HTML tĩnh duy nhất, nhưng nó có thể tự ghi vào đĩa với sự trợ giúp của một tiểu dụng Java (Tiddly Saver). you cannot by default write a file to the local disk, by using plain JavaScript in a browser. You'll need a helper to do that. For example, TiddlyWiki is a wiki engine that is just a single, static HTML file, but it can write itself to disk with the help of a Java applet (Tiddly Saver). |