如何使用 Cookie/会话或本地存储禁用提交按钮

Question

我知道 cookie/存储可以被删除，但它仍然可以阻止许多不知道它的人类垃圾邮件发送者。

如何只禁用特定页面的表单提交按钮 1 天？

因此，当用户提交表单并且重新加载页面或再次输入时保存“已提交”cookie 的代码，浏览器会检查用户是否已“提交”cookie 如果是{按钮禁用} 其他{默认按钮}

注意*我的网站有多个表单页面，所以我正在寻找仅在代码实现时才适用于特定页面的方法 我怎么把这种代码写进去

<form action="userdata.php">
  <input type="text" id="question">
  
  <input type="submit" value="Submit">
</form> 

这是我需要在我的网站中添加的最后一件事，如果它完成了，我终于可以发布我的网站了，所以请在这方面帮助我。

Answer 1

试试这个：

let button = document.getElementById('button');

button.addEventListener('click', () => {
    let date = new Date();
    button.disabled = true;
    localStorage.setItem('validation', JSON.stringify({date: date}));
}); 

checkStorage = () => {
    if(JSON.parse(localStorage.getItem('validation'))){
        let item = JSON.parse(localStorage.getItem('validation'));
        let storageDate = new Date(item.date)
        let actualDate = new Date();

        if(actualDate - storageDate > 8.64e+7){
            button.disabled = false;
        }
    }
}


window.load = checkStorage();

<button id="button">Submit</button>

Answer 2

您可以通过三种方式做到这一点。

1. 后端，如果您的用户有帐户，这是最可靠的方式。这也将在设备间持续存在。

在用户已经提交时更改您呈现表单的方式以呈现如下输入：

<input type="submit" value="Submit" disabled>

如何做到这一点取决于您的后端环境。

1. 本地存储 提交表单后，在用户 localStorage 中存储一个值，例如：

window.localStorage.setItem('hasSubmittedForm', new Date())

页面加载时检查该值，如果存在则禁用输入

const stored = window.localStorage.getItem('hasSubmittedForm')
const storedAt = new Date(stored)
const now = new Date()
if (storedAt && ((now - storedAt)/86400) > 1) {
    // disabled
}

1. 饼干 您可能应该使用像 cookies js 这样的库，而不是手动编辑 cookie。原理同#2。

Cookies.set('hasSubmittedForm', 'true')
Cookies.get('hasSubmittedForm')