Using A Cookie To Store And Get An Integer

A user starts off with 0.00 and after every click of an image, they earn an additional +0.05. So I have $(document).ready(function(){ $('#image1').one('click',function(){ //

Solution 1:

You can use localStorage

localStorage.setItem('cookieName', 0);

You can retrieve it using

localStorage.getItem('cookieName');

In you case it would be

$(document).ready(function(){
  $("#image1").on("click",function(){
    localStorage.setItem('cookieName', localStorage.getItem('cookieName') + x);
}

Solution 2:

Try This: It uses localStorage if supported, otherwise uses cookies.

var objCookie = {
    set: function (name, value, days) {
        try {
            var expires = '';
            if (days) {
                var date = newDate();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                expires = "; expires=" + date.toGMTString();
            }
            document.cookie = name + "=" + value + expires + "; path=/";
        } catch (e) {
            console.log(e);
        }
    },
    get: function (name) {
        try {
            var nameEQ = name + '=',
                ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = $.trim(ca[i]);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
            }
            returnnull;
        } catch (e) {
            console.log(e);
        }
    },
    remove: function (name) {
        try {
            objCookie.set(name, '', -1);
        } catch (e) {
            console.log(e);
        }
    }
};

var objLocalStorage = {
    set: function (name, value) {
        try {
            localStorage.setItem(name, value);
        } catch (e) {
            // alert('Local Storage is not supported');
            objCookie.set(name, value);
            console.log(e);
        }
    },
    get: function (name) {
        try {
            returnlocalStorage.getItem(name);
        } catch (e) {
            // alert('Local Storage is not supported');return objCookie.get(name);
        }
    },
    remove: function (name) {
        try {
            localStorage.removeItem(name);
        } catch (e) {
            // alert('Local Storage is not supported');
            objCookie.remove(name);
            console.log(e);
        }
    }
};

$(document).ready(function () {
    objCookie.set('myKey', '0.0');

    $("#image1").one("click", function () {
        objCookie.set(parseFloat(objCookie.get('myKey')) + 0.5);

        // Refresh:window.location.reload();
    });
});

Solution 3:

You can use localStorage, or sessionStorage for that. The values set to sessionsStorage will only last until the user closes the tab or his browser, whereas the loclaStorage last until it gets deleted. Note: the dom-storage is a html5 feature, therefore will not be support by IE < 8. See here for the browser-support.

The dom-storage only let you store strings, so you have to parse the values in order to cope with mathematical operations.

if(!localStorage.getItem('value')){ //check if there already are values savedlocalStorage.setItem('value', '0.00');
}
$(document).ready(function(){
   $("#image1").on("click",function(){
       var value = parseFloat(localStorage.getItem('value')); //parse the string saved to the storage.
       value += 0.05; // add your value localStorage.setItem('value', value.toFixed(2)); //round the value to 2 decimals 
   });
});

Demo

To delete an item from the localStorage manually, you can use:

localStorage.deleteItem('value');

If you want to use cookies instead you can use:

document.cookie="theme=theme-dark"; //setter

and

var value = document.cookie; //getter

To print the points to your page you can use s.th. like the following:

var value = localStorage.getItem('value');
var par = $('<p />');
par.text('You have earned ' + value + ' points');
$('selector').after(par); //or .append() or s.th. similar what fits your needs

Demo 2