Multi Theft Auto(MTA)登录页面记住登录状态功能故障求助

Hey there! Let's get your "remember me" feature working properly in Multi Theft Auto. First off, yes, this functionality is absolutely achievable in MTA—client-side cookies are supported as long as you're handling this in a client-side script (not server-side Lua, unless you're syncing, but for basic save/load, client-side JS works).

Let's break down the issues in your current code and fix them step by step:

Key Issues in Your Code #

1. Syntax Errors in JS: Your myFunction has extra closing brackets (}); }) that break the function entirely.
2. Missing Cookie-Writing Logic: You only have code to read cookies, but no code to save the username/password when the user checks the box and submits.
3. Mismatched Element IDs: Your JS targets #id and #password, but your HTML input IDs are UsernameInput and PasswordInput—they don't match, so even if cookies were saved, the values wouldn't populate.
4. Invalid HTML Attributes: Your form has a duplicate form attribute, and the div uses an invalid action attribute (divs don't have action—you need to handle form submission events instead).
5. Label-Input Mismatch: Your label's for attribute points to "Remember Me" instead of the checkbox ID "checkbox", so clicking the label won't toggle the box.

Corrected Code #

JavaScript (with jQuery Cookie)

// Run this when the page loads to populate saved credentials
$(document).ready(function() {
    // Check if "remember me" was enabled before
    if ($.cookie('rememberMe') === 'true') {
        $('#UsernameInput').val($.cookie('savedUsername'));
        $('#PasswordInput').val($.cookie('savedPassword'));
        $('#checkbox').prop('checked', true);
    }
});

// Handle form submission to save credentials if checkbox is checked
function loginTrigger() {
    // Get form values
    const username = $('#UsernameInput').val();
    const password = $('#PasswordInput').val();
    const rememberMe = $('#checkbox').is(':checked');

    // Save or clear cookies based on checkbox state
    if (rememberMe) {
        // Set cookies (expire in 30 days)
        $.cookie('rememberMe', 'true', { expires: 30 });
        $.cookie('savedUsername', username, { expires: 30 });
        $.cookie('savedPassword', password, { expires: 30 });
    } else {
        // Clear existing cookies
        $.cookie('rememberMe', null);
        $.cookie('savedUsername', null);
        $.cookie('savedPassword', null);
    }

    // Add your actual login logic here (e.g., send credentials to MTA server)
    // triggerServerEvent("login", username, password);
}

HTML

<div class="login-form">
    <div class="head">
        <img src="images/mem2.jpg" alt="Login Icon"/>
    </div>
    <form method="POST" class="form login" id="loginform" onsubmit="loginTrigger(); return false;">
        <li>
            <input type="text" id="UsernameInput" class="text" placeholder="Username" />
            <a href="#" class="icon user"></a>
        </li>
        <li>
            <input type="password" id="PasswordInput" placeholder="Password" />
            <a href="#" class="icon lock"></a>
        </li>
        <div class="p-container">
            <input type="checkbox" id="checkbox" name="checkbox" />
            <label for="checkbox">Remember Me</label>
            <input type="submit" value="SIGN IN">
            <div class="clear"></div>
        </div>
    </form>
</div>

What Changed? #

• Fixed JS Syntax: Removed extra brackets and organized code into page load and submission handlers.
• Added Cookie Saving: When the form is submitted, if the checkbox is checked, we save the username/password to cookies with an expiration date.
• Matching IDs: Aligned JS selector IDs with HTML input IDs so values populate correctly.
• Cleaned Up HTML: Removed invalid attributes, fixed the label's for attribute, used placeholder instead of hardcoded value (avoids conflicts with cookie population), and added return false; to the form submit to prevent page reload.
• Page Load Population: On page load, we check if cookies exist and fill in the inputs if "remember me" was enabled.

Important Notes for MTA #

• Make sure you have the jQuery Cookie plugin included in your MTA resource (since you're using $.cookie). If not, you can use native JavaScript document.cookie instead, but jQuery Cookie simplifies the process.
• Storing passwords in cookies is not the most secure practice. If possible, consider storing a secure token instead of the plaintext password, but for basic MTA server use, this approach works.

内容的提问来源于stack exchange，提问作者Ru1n