使用cookie将单击的值存储在单选按钮中

时间:2015-01-19 15:40:10

标签: javascript html

嘿伙计们实际上是js的新手......我有两个单选按钮和一个保存按钮。我已完成的代码

    <input id="male" type="radio" name="sex" id="male" value="male">Male
<input id="female" type="radio" name="sex" id="female" value="female">Female
<button id="buttons">Save me </button>

<script>

function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}


var c = document.getElementById('buttons');
c.onclick = function() {
var c = document.getElementById('male');
var m = document.getElementById('female');

if(c.checked == 'true') {
setCookie('samplecookie', c.value, 30 );
} else if(n.checked == 'true') {
setCookie('anothersamplecookie', n.value, 30);
}

}
</script>

我应该怎么做。

假设我点击女性单选按钮并单击需要存储值的保存按钮,即使页面刷新,仍将检查该值。上面的代码对我没有用..单选按钮取消选中页面刷新时..

我问了一个类似的qus here。但它没有帮助我..我听说过这可以用localstorage来完成..但我不知道怎么做。

希望你们能帮助我使用正确的代码,我们将非常感激...

2 个答案:

答案 0 :(得分:1)

您需要设置并获取Cookie。

FIDDLE

function setCookie(name, value, days) { // from http://www.quirksmode.org/js/cookies.html
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    } else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    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, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

window.onload = function () {
    var gender = getCookie('samplecookie');
    if (gender) {
        if (gender=="male") document.getElementById('male').click(); // or .checked=true; 
        else if (gender=="female") document.getElementById('female').click();
    }
    document.getElementById('buttons').onclick = function () {
        var m = document.getElementById('male');
        var f = document.getElementById('female');
        if (m.checked) {
            setCookie('samplecookie', m.value, 30);
        } else if (f.checked) {
            setCookie('samplecookie', f.value, 30);
        }
    }

}

答案 1 :(得分:0)

我不知道这是否是你想要的。但是,我们想到的是HTML5 Web存储功能。使用该功能,您可以将数据存储在用户的计算机上。

因此,每当用户更改输入字段时,您都可以创建一个将值存储到localstorage中的javascript调用:

   localStorage.setItem(“inputName”, “value”);

然后,当您加载页面时,您会看到是否存储了这些值中的任何一个,然后将其填入。