Using a cookie to store and get an integer

Question

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(){
   //
}

How can I create a cookie that stores the 0.00 on first page load and then adds 0.05 after every click of the image? The page is required to be refreshed after each click so it needs to be stored, I suppose.

Answer 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);
}

Answer 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 = new Date();
                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);
            }
            return null;
        } 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 {
            return localStorage.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();
    });
});