Question

用户以0.00开始，每次点击图片后，他们会额外获得+0.05。

所以我有

$(document).ready(function(){
   $("#image1").one("click",function(){
   //
}

如何创建一个在第一页加载时存储0.00的cookie，然后在每次单击图像后添加0.05？每次点击后都需要刷新页面，因此我需要将其存储起来。

Answer 1

您可以使用localStorage

localStorage.setItem('cookieName', 0);

您可以使用

检索它

localStorage.getItem('cookieName');

在你的情况下，它将是

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

Answer 2

试一试：如果支持，则使用localStorage，否则使用Cookie。

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

Answer 3

您可以使用localStorage或sessionStorage。设置为sessionsStorage的值将持续到用户关闭选项卡或其浏览器，而loclaStorage将持续到删除为止。注意：dom-storage是一个html5功能，因此不支持IE＆lt; 8.有关浏览器支持，请参阅here。

dom-storage只允许存储字符串，因此您必须解析值以应对数学运算。

if(!localStorage.getItem('value')){ //check if there already are values saved
    localStorage.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

要手动从localStorage中删除项目，您可以使用：

localStorage.deleteItem('value');

如果您想使用cookies，可以使用：

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

和

var value = document.cookie; //getter

要将点打印到您的页面，您可以使用s.th.如下：

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

使用cookie来存储和获取整数

3 个答案: