Question

我目前有以下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函数在从一个背景图像交换到另一个背景图像时整齐地淡化。现在它＆＃34;快照＆＃34;从一个图像到另一个图像，因为它交换了类。

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

Answer 1

将Window.sessionStorage API用于单个会话。

只需设置sessionStorage的值（如果适用）（如果没有，请设置默认值）：

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

并在需要时设置：

sessionStorage.setItem("classes", classes);

Answer 2

选择器#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更简单。

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

2 个答案: