保存切换条件答案

【问题标题】：Saving the toggle condition保存切换条件
【发布时间】：2017-04-03 11:55:52
【问题描述】：

我写了一个翻转开关的代码，但是刷新页面时状态总是改变：

【问题讨论】：

请将您的代码直接发布到 SO，不要使用屏幕截图。
试试localStorage 或sessionStorage。
浏览器不会执行php代码。该文件由 apache/nginx 提供？
我们可以使用cookies保存切换状态吗
是的，你可以））但我认为使用本地存储会更快

标签： javascript php jquery css ajax

【解决方案1】：

我假设您正在尝试用其他东西替换您的 Ajax 发布请求。

我的建议是使用 cookie 将一些信息保存在本地供 js 使用。

首先，像这样将jQuery & jQuery Cookie 添加到您的网页顶部（在<head> 标签内）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js.js" charset="utf-8"></script>

然后，在您的 javascript 文件中，执行以下操作：

(function($) {
  // Grabs cookie and puts into a js variable.
  var toggled = $.cookie('toggled');

//  On click of checkbox, check if set/unset. Then set cookie to true/false.

  $('#switch').change(function()) {
      if($(this).is(':checked')) { // If set to true, set toggled to true.
        $.cookie('toggled', true, { expires: 1, path: '/' });
      } else { // Else, set to false.
        $.cookie('toggled', null, { expires: 1, path: '/' });
      }
  }

})(jQuery);

然后，您需要在刷新时检查切换的 cookie，并添加行为以在切换为 true 时选中该框：

if(toggled == 'true') { //If cookie set to true...
 $('#switch').attr('checked','checked').flipswitch("refresh") // Flip the switch (Important for jquery mobile).
}

有关工作示例，请参阅 jsFiddle。

我希望这会有所帮助。

【讨论】：

我是初学者，你能帮我详细说明一下吗。。抱歉给我添麻烦了……请理解我的问题
@mika 我已经更新了我的答案并添加了一个带有工作示例的 jsfiddle 示例。
@mika 添加（我认为）
kevin 先生，当我在浏览器中运行该代码时，切换状态未保存，它在刷新页面时将 bzck 恢复为原始关闭状态
@mika 似乎缺少一些双引号。我已经删除了 php 部分，但再次检查是否可以正常工作。您必须再次重新添加 php