表单发布数据 - 保存到 Cookie - 从 Cookie 中读取

Posted 2023-05-07

【中文标题】表单发布数据 - 保存到 Cookie - 从 Cookie 中读取

【英文标题】：Form Post Data - Save to Cookie - Read from Cookie

【发布时间】：2018-08-20 16:57:42

【问题描述】：

我有一个包含大约 20-30 个字段的简单 html 表单，其中有两个按钮，一个是“保存”，另一个是“加载”。

我正在尝试找到一种方法，我可以运行两个函数，一个将表单上的所有字段保存为 cookie，另一个将所有字段从 cookie 加载回表单。

我已设法将单个参数保存为表单中的 cookie，但我无法在数组中执行此操作。此外，我似乎无法调出我尝试过的每个保存的参数getcookie，但这不起作用，我必须使用document.cookie，因为setcookie 也不起作用。

 document.cookie="firstname="+document.getElementById('firstname').value+"; expires=Thu, 18 Dec 2019 12:00:00 UTC";
 document.cookie="secondname="+document.getElementById('secondname').value+"; expires=Thu, 18 Dec 2019 12:00:00 UTC";

【参考方案1】：

您使用什么方法将 cookie 值设置为数组？ document.cookie 方法应该只接受字符串。这是设置和获取 cookie 数组的简单方法：

function setCookieArray(cname, arrayValues, exdays) 
    var expires = "";
    if (exdays) 
      var d = new Date();
      d.setTime(d.getTime() + (exdays*24*60*60*1000));
      expires = ";expires="+ d.toUTCString();
    
    var json_str = JSON.stringify(arrayValues);

    document.cookie = cname + "=" + json_str + expires + ";path=/";


function getCookieArray(cname) 
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) 
        var c = ca[i];
        while (c.charAt(0) == ' ') 
            c = c.substring(1);
        
        if (c.indexOf(name) == 0) 
            return JSON.parse(c.substring(name.length, c.length));
        
    
    return "";

你可以这样设置cookie：

setCookieArray("myTest1", ["a","b","c","d"], 3); //expires in 3 days

然后像这样得到 cookie 数组：

getCookieArray("myTest1");

【讨论】：

我无法让它工作。我不知道我做错了什么。如何保存表单中的帖子数据？我曾尝试使用 getcookiearray 和 setcookiearray 但它只是不断收到未定义的错误？

hmm.. 也许问题在于您如何收集表单数据。您可以发布表单 HTML 的 sn-p 吗？

嗨罗伯特，我已经设法让上面的代码正常工作，所以我现在可以正确读取并保存到 cookie，我在 onclick 事件中错误地调用它。我现在只需要弄清楚如何从表单中提取帖子数据并提交给 setcookie 数组。

我可以通过表单字段直接访问变量，而不是发布数据

好的，您现在可以获取数据了。在这一点上，您有几个选择如何拉取表单数据。您是否使用像 php 这样的后端语言？如果是这样，实际上最好在此处设置您的 cookie。否则，您可以使用表单标签的 onSubmit 属性，也可以将 onclick 属性添加到提交按钮。然后，您可以从表单中获取值并提醒用户。