Question

我刚开始使用JavaScript＆amp; jQuery，我正在努力解决问题，如果这是一个基本问题，请道歉。我写了一些简单的代码：

从表单中捕获值
将其存储到Cookie
从cookie中调用值并将其存储在JS变量
打印JS变量

...但我无法让它发挥作用。我可以看到cookie设置正确，但由于某种原因，我无法检索它并将其写入变量。这是我的代码，非常感谢任何帮助！

<!-- CAPTURE A VALUE IN A SIMPLE FORM... -->
  <input id="txt" type="text" value="foo" />
  <input id="btn" type="button" value="1 - write cookie" />
  <input id="btntwo" type="button" value="2 - set cookie to variable" />
  <input id="btnthree" type="button" value="3 - print the cookie" />

<!-- WRITE THE VALUE TO THE COOKIE WHEN A USER CLICKS THE BTN... -->
  <script type="text/javascript">                                         
   $(document).ready(function () {
    $("#btn").on("click", function () {
      $.cookie('myCookie', $("#txt").val(), { expires: 365 });
      });
    });                              
  </script> 

<!-- SET THE COOKIE VALUE TO A VARIABLE WHEN A USER CLICKS THE BTNTWO... -->
<script type="text/javascript">   
$(document).ready(function() {
  $("#btntwo").on("click", function () {
    var cookVal = $.cookie('myCookie')
  });
});
</script>     

<!-- PRINT THE COOKIE VALUE ON THE SCREEN WHEN A USER CLICKS THE BTNTHREE... -->
<script type="text/javascript">   
$(document).ready(function() {
  $("#btnthree").on("click", function () {
    document.write(cookVal);     
  });
});
</script>

Answer 1

您的cookVal变量是点击处理程序功能的本地变量，外面的任何内容都无法访问它。

此外，请勿在事件处理程序中使用document.write。如果HTML已完全解析（并准备好DOM），则文档将关闭。之后调用document.write将清除它并重写它。

不过，您可以将单独的脚本加入到单个脚本中，这可能会使代码更具可读性。

<input id="txtin" type="text" value="foo" />
<button id="btn">write cookie</button>
<button id="btntwo">2 - set cookie to variable</button>
<button id="btnthree">3 - print the cookie</button>
<output id="txtout" />

<script type="text/javascript">                                         
$(document).ready(function () {
  <!-- WRITE THE VALUE TO THE COOKIE WHEN A USER CLICKS THE BTN... -->
  $("#btn").on("click", function () {
    $.cookie('myCookie', $("#txtin").val(), { expires: 365 });
  });
  <!-- SET THE COOKIE VALUE TO A VARIABLE WHEN A USER CLICKS THE BTNTWO... -->
  var cookVal; // declared local to the whole onready function
  $("#btntwo").on("click", function () {
    cookVal = $.cookie('myCookie');
  });
  <!-- PRINT THE COOKIE VALUE ON THE SCREEN WHEN A USER CLICKS THE BTNTHREE... -->
  $("#btnthree").on("click", function () {
    $("#txtout").val(cookVal);     
  });
});
</script>

Demo at jsfiddle.net

Answer 2

首先，您不需要多个$(document).ready方法。

尝试时输出的内容：

$(document).ready(function () {

    $("#btn").on("click", function () {
       $.cookie('myCookie', $("#txt").val(), { expires: 365 });
    });                              

    var cookVal = 'NOT SET';

    $("#btntwo").on("click", function () {
       cookVal = $.cookie('myCookie')
    });

    $("#btnthree").on("click", function () {
       document.write(cookVal);     
    });

});

如果您查看JavaScript的#btn onclick，则保存Cookie的语法是错误的。您正在添加额外的})，这会破坏脚本。如果您不确定，请使用Chrome中的开发者工具或Firefox中的Firebug并查看您的控制台。在那里输出JavaScript错误。

Answer 3

你不必将每一个放在一个单独的$(document).ready(function()中，你可以将它们全部放在一个中。另外，这方面的简写是：

$(function(){
............
});

将值从cookie存储到JavaScript变量

3 个答案: