Hướng dẫn how to save data from html form using javascript - cách lưu dữ liệu từ dạng html bằng javascript

Tôi đang chia sẻ một ví dụ đơn giản ở đây hôm nay để giải thích cách bạn có thể lưu dữ liệu biểu mẫu của mình dễ dàng trong tệp văn bản hoặc trong tệp .txt bằng JavaScript.

Một biểu mẫu web thường có nhiều yếu tố khác nhau, chủ yếu là các trường đầu vào. Bạn có thể trích xuất dữ liệu từ các yếu tố này và lưu nó trong cơ sở dữ liệu như SQL Server hoặc chỉ cần chuyển đổi nó thành tệp JSON. Bạn thậm chí có thể lưu dữ liệu biểu mẫu của bạn trong một tệp văn bản.

Hãy cùng xem ví dụ đầu tiên.




    Save form Data in a Text File using JavaScript
    


    
id="selCountry">
id="msg" name="msg" placeholder="Write some message ..." style="height:100px">
onclick="saveFile()" />

Thử nó

Vui lòng không bị choáng ngợp bởi quy mô của chương trình. Mã bên trong thẻ là quan trọng.code inside the

Khi tôi đã tạo liên kết, tôi sẽ gán đối tượng Blob là HREF (hoặc là URL) cho thẻ liên kết mới được tạo.href (or as the URL) to the newly created Link tag.

if (window.webkitURL != null) {
    newLink.href = window.webkitURL.createObjectURL(textToBLOB);
}
else {
    newLink.href = window.URL.createObjectURL(textToBLOB);
    newLink.style.display = "none";
    document.body.appendChild(newLink);
}

Bây giờ, bạn cũng có thể chuyển đổi dữ liệu biểu mẫu của mình thành PDF bằng JavaScript. Now, you can also convert your Form data into PDF using JavaScript.

Hướng dẫn how to save data from html form using javascript - cách lưu dữ liệu từ dạng html bằng javascript

Blob là viết tắt của đối tượng lớn nhị phân. Blobs thường là, hình ảnh và tệp âm thanh, được chuyển đổi thành nhị phân và sau đó được lưu trữ trong cơ sở dữ liệu. Sử dụng hàm tạo blob (), tôi có thể chuyển đổi các văn bản thông thường thành các đối tượng Blob. stands for Binary Large Object. BLOBs are typically, images and audio files, which are converted into Binary and are later stored in a database. Using the Blob() constructor, I can convert ordinary texts into Blob objects.

Bạn có thể thấy giá trị BLOB (được gắn vào URL liên kết hoặc thẻ mà chúng tôi đã tạo trong tập lệnh của chúng tôi) trong cửa sổ Bảng điều khiển trình duyệt của bạn. Ví dụ, tag that we created in our script) in your browser’s console window. For example,

if (window.webkitURL != null) {
    newLink.href = window.webkitURL.createObjectURL(textToBLOB);
    console.log (newLink);    
}

hình ảnh

Hướng dẫn how to save data from html form using javascript - cách lưu dữ liệu từ dạng html bằng javascript

Hình ảnh hiển thị thẻ với URL có giá trị blob. Trong cửa sổ Bảng điều khiển, sao chép URL và dán nó vào thanh địa chỉ trình duyệt. Trình duyệt sẽ dịch Blob và sẽ hiển thị giá trị.

Hãy nhớ rằng: Mỗi lần bạn nhấp vào nút Lưu, tập lệnh sẽ tạo một blob mới từ dữ liệu biểu mẫu.: Every time you click the save button, the script will create a new BLOB from the form data.

Dòng mã cuối cùng, chỉ cần gọi sự kiện nhấp chuột của thẻ và trình duyệt tải xuống tệp chứa dữ liệu trong đĩa cứng cục bộ của bạn.click event of the tag and the browser downloads the file containing the data in your local hard disc.

newLink.click();

Không chỉ là văn bản đơn giản, bạn thậm chí có thể chuyển đổi hình ảnh thành PDF chỉ bằng JavaScript. Kiểm tra bài viết này. Not just plain text, you can even convert an image into a PDF using only JavaScript. Check out this post.

Đó là nó. Cảm ơn vì đã đọc. ☺

← Trước đó →Next →


Làm thế nào lưu trữ formdata trong javascript?

Nếu bạn muốn lưu nó trên cơ sở dữ liệu. Gửi biểu mẫu đến một trang có thể chạy một số mã back-end, như PHP, ASP, Coldfision, JSP hoặc ngôn ngữ yêu thích của bạn là gì. Lưu ý: Một cách lưu trữ dữ liệu hiện đại hơn là sử dụng window.localstorage.using Window. localStorage.

Làm cách nào để lưu dữ liệu biểu mẫu HTML vào tệp văn bản?

Hướng dẫn từng bước về cách đặt dữ liệu trường HTML Form vào tệp văn bản hoặc tệp txt dot trong PHP..
Tạo một tệp PHP và đặt mã dưới đây và lưu nó.
Tạo một tệp mới trong cùng một thư mục hoặc thư mục & tên dữ liệu nó.txt và lưu nó ..
Bây giờ chạy tệp PHP.Nhập bất kỳ văn bản nào và nhấn vào nút gửi và kiểm tra dữ liệu của bạn ..

Tôi lưu dữ liệu biểu mẫu HTML ở đâu?

HTML Web Storage cung cấp hai đối tượng để lưu trữ dữ liệu trên máy khách: window.localstorage - Lưu trữ dữ liệu không có ngày hết hạn.window.SessionStorage - Lưu trữ dữ liệu cho một phiên (dữ liệu bị mất khi tab Trình duyệt được đóng)window.localStorage - stores data with no expiration date. window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)

JavaScript có thể lưu dữ liệu không?

JavaScript cho phép chúng tôi lưu trữ dữ liệu trong trình duyệt bằng API lưu trữ cục bộ.Tại đây, bạn có thể sử dụng LocalStorage và SessionStorage.Các đối tượng cho phép chúng tôi lưu trữ dữ liệu (trong các cặp khóa/giá trị) và cập nhật nó từ lưu trữ của trình duyệt.Để xem dữ liệu, hãy mở trình duyệt của bạn.. Here, you can use LocalStorage and SessionStorage . The objects let us store data (in key/value pairs) and update it from the browser's storage. To view the data, open your browser.