如何将 html 表单元素存储在 cookie 中？答案

【问题标题】：How to store an html form element in a cookie?如何将 html 表单元素存储在 cookie 中？
【发布时间】：2016-06-22 18:32:23
【问题描述】：

我在一个页面上有 3 个 html 范围滑块字段，我想将它们的值存储在一个 cookie 中，以便滑块将保存用户在滚动离开页面并稍后返回时选择的数据。我需要把它保存 3 个小时左右。

<input type="range" id="loan" name="loan" min="5000" max="500000" step="5000">
<input type="range" id="period" name="period" min="1" max="15">
<input type="range" id="earn" name="earn" min="5000" max="500000" step="5000">

我对 javascript 和 php 非常陌生。我在谷歌上搜索了教程，但我看到的示例看起来比我需要的要复杂。

【问题讨论】：

标签： javascript html cookies

【解决方案1】：

这应该可行。这两个函数应该允许您按名称/值/时间设置 cookie 并按名称取回它们。既然你问了三个小时，我做了一个 3*60*60*1000 来获得设置 cookie 的毫秒数。您可以根据需要进行更改。

function setCookie(cname, cvalue, time) {
    var d = new Date();
    d.setTime(d.getTime() + time);
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.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 c.substring(name.length,c.length);
        }
    }
    return "";
}

setCookie('loan',document.getElementById('loan').value,10800000);

getCookie('loan');

【讨论】：

非常感谢你——这似乎是我需要的。我不是 100% 理解如何完全实现它。我假设我把它放在头部的
是的，将它们放在头部的脚本标签中，并在任何地方使用这些功能。您可能必须修改它们以设置字段的 onChange cookie。
好的，感谢您的帮助。我一直在网上阅读有关 cookie 的更多信息。我是否需要使用某种 if 函数来检查 cookie 是否存在，以便 html 元素可以显示 cookie 的保存值，如果不存在，则需要返回默认值？

【解决方案2】：

我建议，你使用 localStorage 来做这个：

<input type="range" id="loan" name="loan" min="5000" max="500000" step="5000">
<input type="range" id="period" name="period" min="1" max="15">
<input type="range" id="earn" name="earn" min="5000" max="500000" step="5000">

//When you want to save values in localStorage
localStorage.setItem('loan', document.getElementById("loan").value );
localStorage.setItem('period', document.getElementById("period").value );
localStorage.setItem('earn', document.getElementById("earn").value );

//When you want to access already stored values:
var loan = localStorage.getItem('loan');
var period = localStorage.getItem('period');
var earn = localStorage.getItem('earn');

当您第一次尝试访问这些属性时，即当您没有将这些值存储在“localStorage”中时，您将获得null。您可能需要根据需要使用parseInt() 或parseFloat()，因为此处返回的值将采用String 格式。

【讨论】：

【解决方案3】：

您可以使用innerHTML 将整个表单转换为字符串，然后保存该字符串。

示例（整个表格）：

var stringToCookie = document.getElementById('myForm').innerHTML;

但是您丢失了 JavaScript 修改、事件等...

【讨论】：