Hướng dẫn how to save data in text file in javascript - cách lưu dữ liệu trong tệp văn bản trong 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.save your form data in a text file.

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

Đánh dấu

<!DOCTYPE html>
<html>
<head>
    
    <style>
        * { box-sizing: border-box; }
        div {
            padding: 10px;
            background-color: #f6f6f6;
            overflow: hidden;
        }
        input[type=text], textarea, select {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        input[type=button]{ 
            width: auto;
            float: right;
            cursor: pointer;
            padding: 7px;
        }
    </style>
</head>
<body>
    <div>
        
        <div><input type="text" id="txtName" placeholder="Enter your name" /></div>
        <div><input type="text" id="txtAge" placeholder="Enter your age" /></div>
        <div><input type="text" id="txtEmail" placeholder="Enter your email address" /></div>
        <div>
            <select id="selCountry">
                <option selected value="">-- Choose the country --</option>
                <option value="India">India</option>
                <option value="Japan">Japan</option>
                <option value="USA">USA</option>
            </select>
        </div>
        <div>
            <textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
        </div>

        
        <div>
            <input type="button" id="bt" value="Save data to file" onclick="saveFile()" />
        </div>
    </div>
</body>

Bạn có thể thích điều này. Cách đọc tệp văn bản (tệp .txt) bằng JavaScript. You may like this. How to read a text file (a .txt file) using JavaScript.

Kịch bản

<script>
    let saveFile = () => {
    	
        
    	const name = document.getElementById('txtName');
        const age = document.getElementById('txtAge');
        const email = document.getElementById('txtEmail');
        const country = document.getElementById('selCountry');
        const msg = document.getElementById('msg');
        
        
        let data = 
            '\r Name: ' + name.value + ' \r\n ' + 
            'Age: ' +age.value + ' \r\n ' + 
            'Email: ' + email.value + ' \r\n ' + 
            'Country: ' + country.value + ' \r\n ' + 
            'Message: ' + msg.value;
        
        
        const textToBLOB = new Blob([data], { type: 'text/plain' });
        const sFileName = 'formData.txt';	   

        let newLink = document.createElement("a");
        newLink.download = sFileName;

        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);
        }

        newLink.click(); 
    }
</script>
</html>

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