Jquery 页面刷新后保持类切换

我目前正在使用CSS、HTML和JQuery中的滑动按钮。我对JQuery有基本的了解，但对CSS和HTML有相当的了解。我有一个小问题，虽然，每当你按下按钮，它的工作正常，但页面重新加载后，它会恢复到之前切换的状态。我如何解决这个问题，向任何解决方案（最好是客户端）开放？ （下面是我的按钮片段及其旁边的代码）

$（文档）.ready（函数（）{
$（'.toggle menu lang cont'）。单击（function（）{
$（'.handle'）.toggleClass（'slide'）；
$（'.toggle menu lang cont'）。toggleClass（'color-swap'）；
});
});
正文{
背景色：黑色；
}
.切换菜单语言控制{
位置：绝对位置；
顶部：2.5vw；
右：5vw；
最大宽度：3.5vw；
宽度：3.5vw；
最大高度：1.5vw；
高度：1.5vw；
边界半径：1vw；
z指数：5；
背景色：#fff；
过渡：所有1；
变换：比例（1）；
}
.处理{
位置：绝对位置；
顶部：0.15vw；
右：.25vw；
背景色：#0282E4；
宽度：1.25vw；
高度：1.25vw；
边界半径：100%；
滤镜：水滴阴影（0vw.15vw.15vw rgb（0,0,0,0.6））；
过渡：所有1；
变换：比例（1）；
}
.幻灯片{
位置：绝对位置；
右：2vw；
背景色：白色；
过渡：所有1；
}
.颜色交换{
背景色：#0282E4；
过渡：所有1；
}

代码项目
基本思想是在交换机接通时利用
LocalStorage
。然后将交换机的当前状态存储到存储器中。当页面加载时，检查存储密钥和存储值是否存在。如果该值为真（开关处于激活状态），则进行适当调整，以使正确的等级就位。如果开关未激活，请不要执行任何操作

$(document).ready(function() {
  function toggleHandle() {
    $('.handle').toggleClass('slide');
  }

  if (localStorage.getItem('switch-state') && localStorage.getItem('switch-state') === "true") {
    $('.toggle-menu-lang-cont').addClass('color-swap');
    toggleHandle(); 
  }

  $('.toggle-menu-lang-cont').click(function() {
    let el = $('.toggle-menu-lang-cont');
    toggleHandle();
    el.toggleClass('color-swap');
    localStorage.setItem('switch-state', el.hasClass('color-swap'));
  });
});

工作示例
如果要保存状态，需要将其保存到某个位置。如果只需要在客户端而不需要在服务器端访问此状态，则应使用
localStorage
或
sessionStorage
。这两者非常相似，但如果您希望状态保持很长时间，请使用
localStorage

您可以通过以下方式访问值：

localStorage.getItem("colorSwapState");

localStorage.setItem("colorSwapState", "swap");

如果
项不存在，则返回
null
。否则，该值始终作为字符串返回

您可以使用以下设置值：

localStorage.getItem("colorSwapState");

localStorage.setItem("colorSwapState", "swap");

删除：

localStorage.removeItem('colorSwapState')

我会将您的JavaScript更新为如下内容：

$(document).ready(function() {
  if (localStorage.getItem("colorSwapState") == "swap")
  {
    $('.handle').addClass('slide');
    $('.toggle-menu-lang-cont').addClass('color-swap');
  }

  $('.toggle-menu-lang-cont').click(function() {
    if (localStorage.getItem("colorSwapState") == "swap") {
      localStorage.removeItem("colorSwapState");
    } 
    else {
      localStorage.setItem("colorSwapState", "swap");
    }

    $('.handle').toggleClass('slide');
    $('.toggle-menu-lang-cont').toggleClass('color-swap');
  });
});

不确定这是否可行，但您应该签出
Window.localStorage
。链接此处->将切换状态存储在本地存储中，当页面加载时，查找存储值。根据存储的值，您可以设置切换按钮状态。我将研究@Snehal ShahHey，喜欢它，在大多数情况下都有效，不幸的是手柄（小圆圈）无法保持其位置变化。你能把代码也写进去吗。非常感谢！只需将
$（'.handle'）.toggleClass（'slide'）。我更新了我的例子，我可以吻你！它完美无瑕，我非常感谢你的帮助。@JordanDunton一个吻可能很好，但选择我的答案作为选择的答案会更可取。：）