I have 3 html range slider fields on a page, and I would like to store their values in a cookie, so that the sliders will hold the data the user selected when they scroll away from the page and and e back later. I need to keep it stored for like 3 hours or so.

<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">

I am very new to javascript & php. I have googled for tutorials, but the samples I've seen looks more plicated than what I need.

I have 3 html range slider fields on a page, and I would like to store their values in a cookie, so that the sliders will hold the data the user selected when they scroll away from the page and and e back later. I need to keep it stored for like 3 hours or so.

<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">

I am very new to javascript & php. I have googled for tutorials, but the samples I've seen looks more plicated than what I need.

• javascript
• html
• cookies

3 Answers 3

This should work. The two functions should allow you to set cookies by name/value/time and get them back by name. Since you asked for three hours, I have done a 3*60*60*1000 to get the milliseconds to set the cookie for. You can change it as required.

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');

I would suggest, you use localStorage for this:

<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');

You will get null for the first time you try to access these properties i.e. when you do not have these values stored in your 'localStorage'. You may need to use parseInt() or parseFloat() depending on your needs, as the values returned here would be in String format.

You can convert the entire form to a string with innerHTML, and then save that string.

Example (for the entire form):

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

But you lost JavaScript modifications, events, etc...