将更改的 jQuery 变量存储到会话或本地存储

Store a changing jQuery variable to session or local storage

本文关键字：存储 会话 变量 jQuery      更新时间：2023-09-26

我目前有以下jQuery代码在工作。 它是这样做的：当我单击一个按钮时，它将在类之间交换。 其中每个类都包含一个背景图像。 因此，当我单击这个按钮时，它会在背景图像中循环。 （编辑：我只需要存储当前变量是什么，所以当他们交换页面时，该变量就是加载的）。

$('.button').mousedown(function () {
  $('#backgrounds').each(function(){
    var classes = ['bg1','bg2','bg3','bg4'];
    this.className = classes[($.inArray(this.className, classes)+1)%classes.length];
  });
});

但是，我的网站有多个页面。 因此，我需要做的是将当前变量存储到会话存储或本地存储中，然后在页面加载时检索该变量。 这样，当我从一个页面跳到另一个页面时，将显示相同的类（因此显示背景图像）。 我不需要（也不想）使用 cookie - 我只需要这个来持续当前会话。

此外，如果可能的话（虽然远不如存储变量重要），我还希望这个 jQuery 函数在从一个背景图像交换到另一个背景图像时整齐地淡入淡出。 现在，它在交换类时从一个图像"捕捉"到下一个图像。

提前感谢 - 任何帮助都非常感谢！

对单个会话使用 Window.sessionStorage API。

只需通过从sessionStorage获取值（如果适用）进行设置（如果没有，请设置默认值）：

var classes = sessionStorage.getItem(classes) || ['bg1','bg2','bg3','bg4'];

并在需要时进行设置：

sessionStorage.setItem("classes", classes);

选择器#backgrounds应仅匹配一个元素。所以没有必要使用each：

// Define classes & background element.
var classes = ['bg1','bg2','bg3','bg4'],
    $bg = document.getElementById('backgrounds');
// On first run:
$bg.className = sessionStorage.getItem('currentClass') || classes[0];
// On button click:
$('.button').mousedown(function () {
  // (1) Get current class of background element,
  // find its index in "classes" Array.
  var currentClassIndex = classes.indexOf($bg.className);
  // (2) Get new class from list.
  var nextClass = classes[(currentClassIndex + 1)%classes.length];
  // (3) Assign new class to background element.
  $bg.className = nextClass;
  // (4) Save new class in sessionStorage.
  sessionStorage.setItem('currentClass', nextClass);
});

在这个演示中，我使用 getElementById 来选择 #backgrounds DOM 元素，而不是使用 jQuery 选择它。这是因为 jQuery 元素表示实际上没有 className 属性，在这种情况下，普通的 JavaScript API 更简单。

相关文章：