jQuery在cookie中存储div的值，并在页面刷新时加载它

Question

当按钮被点击时，我试图存储这个div的值

<div id="results">
        <span id="eresult">0</span>
</div>
<input id="excellent" type="image" src="smile.png" name="image" width="150" height="150">

和下面的

$('#excellent').click(function() {
    $("#voting").text("Thank you for rating!")
                .show()
                .delay(500)
                .fadeOut();
    var value = document.getElementById("eresult").innerHTML;
    var newValue = parseInt(value,10) + 1;
    document.getElementById("eresult").innerHTML = newValue;
    $.cookie('ename', newValue);
});

以这种方式存储cookie是否正确?当页面刷新时，我如何检索值并再次在"结果"中显示它?

Answer 1

根据插件设置cookie的正确方式:

$.cookie('name', 'value');

你可以这样读cookie:

$.cookie('ename'); // => "value"
$.cookie('nothing'); // => undefined

您可以这样设置<span id="eresult">0</span>的内容:

$(document).ready(function(){
    $('#eresult').html(
        $.cookie('ename');
    );
});

Answer 2

您可以检查您创建的名称cookie是否存在，之后您可以打印值

$(document).ready(function(){
    if($.cookie("ename") != '') {
        $("#eresult").html($.cookie("ename"));
         // or
        document.getElementById("eresult").innerHTML = $.cookie("ename");
    }
});

Answer 3

JS:

$(document).ready(function(){
    var $eresult = $('#eresult'),
            value = parseInt($eresult.text());  // Get value from #eresult
    if ($.cookie('ename')) {
        value = parseInt($.cookie('ename')); // Override value from cookie (if exists)
    }
    $eresult.text(value);
    $('#excellent').click(function() {
        $("#voting").text("Thank you for rating!")
            .show()
            .delay(500)
            .fadeOut();
        value += 1;                // Increase value...
        $.cookie('ename', value);   // ...and save it
        $eresult.text(value);       // show new value on page
    });
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="results">
  <span id="eresult">0</span>
</div>
<input id="excellent" type="image" src="smile.png" name="image" width="150" height="150">