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

【问题标题】：jQuery storing value from div in cookie and loading it when page is refreshedjQuery将div中的值存储在cookie中并在页面刷新时加载它
【发布时间】：2016-08-16 21:52:23
【问题描述】：

我正在尝试在单击按钮时存储此 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 是否正确？如何在页面刷新时检索该值并再次将其显示在“eresult”中？

【问题讨论】：

你使用 jquery-cookie 插件吗？
是的，我用过
如果你有太多麻烦，你可以考虑 localStorage 作为替代方案。

标签： jquery html css jquery-cookie

【解决方案1】：

根据plugin，您正在以正确的方式设置cookie：

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

你可以这样读取cookie：

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

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

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

【讨论】：

在尝试您设置内容的方法之前，我的“eresult”值一直未定义。但是，当我单击按钮以增加值时，刷新页面后，它再次重置为 0，而不是显示存储在 cookie 中的最后一个数字。如何确保在页面刷新之前显示最后存储的值
@user2728875 你是如何开发这个的？这不适用于沙盒环境，也不适用于 phonegap / cordova 应用程序。
只是一个运行在浏览器上的html文件。

【解决方案2】：

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

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

    }
});

【讨论】：

它似乎不存在，这是否意味着cookie没有正确存储？
检查警报(newValue);在创建 cookie 之前

【解决方案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">

【讨论】：

它似乎没有保存该值，因为当页面刷新时，该值再次变为0。我可以知道脚本应该放在哪里吗？在body标签结束前还是？
单击#excellent 按钮时会保存值。脚本需要放在 jQuery 声明之后，并且两者都应该放在 body 结束标记之前。