Plunker

Question

如果客户点击了megaMenu，我需要设置cookie或使用本地存储。默认情况下这必须为false，如果客户单击菜单按钮，则在下一页设置为true。任何帮助，将不胜感激。以下是我到目前为止所做的，但我仍然坚持如何在第二页上获得megaClicked = true。

var megaClicked = { value: false };
var megaMenu = $("#menu-top-navigation > div");
// check local storage on page load
if (localStorage.getItem('mega')) {
    megaClicked = JSON.parse(localStorage.getItem('mega'))
}

megaMenu.bind('click', function () {
    megaClicked.value = true;
    localStorage.setItem('mega', JSON.stringify(megaClicked));
})

Answer 1

如果存在mega，则获取该值，如果不存在则存储它。

var megaMenu = $("#menu-top-navigation > div");
// check local storage on page load
if (localStorage.getItem('mega')) {
  var megaClicked = JSON.parse(localStorage.getItem('mega'))
}else{
  var megaClicked = { value: false };
  localStorage.setItem('mega', JSON.stringify(megaClicked));

 }

megaMenu.bind('click', function () {
    megaClicked.value = true;
    localStorage.setItem('mega', JSON.stringify(megaClicked));
})

请记住，运行代码后，本地存储项"mega"将一直保留，直到您将其删除为止。所以首先if永远是真的。也许较短的版本可能是这样的：

if (+localStorage.getItem('mega')) {
  var megaClicked = +localStorage.getItem('mega');
}else{
  localStorage.setItem('mega', 0);

 }

$("#menu-top-navigation > div").bind('click', function () {    
    localStorage.setItem('mega', 1);
})

Answer 2

以下演示在此处不起作用。要测试正常运行的演示，请转到此Plunker。它有2页：

由于页面位于同一个域中，因此两个页面共享相同的WebStorage。让两个页面共享相同的外部脚本将始终如一地将相同的行为应用于同一WebStorage。
函数menuUse(temp)传递一个分配为temp的布尔值。如果您想在检测到“已用”标志后将其删除，请将temp作为"used"传递：
```
menuUse(true)
```

如果您想要此行为而不必使用temp参数，请将名为localStorage的所有对象更改为sessionStorage。

在演示和Plunker中评论的详细信息。演示无效，请参阅Plunker。

Plunker

演示

$(function() {
  // Pass true if you want to remove flag from storage after it's been detected
  menuUse();

  $('#mega').on('click', showHide);

  // Anytime the megamenu is used the "used" flag is stored as true
  function showHide(e) {
    $(this).find('ul').slideToggle();
    localStorage.setItem("used", JSON.stringify("used"));
  }

  // On every page load of either page1 or page 2, there will be a check for the "used" flag
  function menuUse(temp = false) {
    var data = JSON.parse(localStorage.getItem("used"));
    if (data === "used") {
      return action(temp);
    } else if (data === null) {
      console.log('Mega NOT used.');
      return false;
    } else {
      console.log('Flag does NOT exist yet.');
      return false;
    }
  }

  // If menuUse passed through true and the "used" flag is true, then the flag will be removed
  function action(temp) {
    if (temp) {
      console.log('Mega used, webStorage entry renoved.');
      localStorage.removeItem("used");
    } else {
      console.log("Mega used.");
    }
    return false;
  }

});

ul {
  list-style: none;
}

.hide {
  display: none
}

a {
  display: block
}

<!DOCTYPE html>
<html>

<head>
  <link href="lib/style.css" rel="stylesheet" />
</head>

<body>
  <h1>PAGE 1</h1>
  <a href='page2.html'>PAGE 2</a>
  <nav id="mega">
    <a href='#/'>MEGA</a>
    <ul class="hide">
      <li>
        <a href="#/">ITEM</a>
      </li>
      <li>
        <a href="#/">ITEM</a>
      </li>
      <li>
        <a href="#/">ITEM</a>
      </li>
      <li>
        <a href="#/">ITEM</a>
      </li>
      <li>
        <a href="#/">ITEM</a>
      </li>
      <li>
        <a href="#/">ITEM</a>
      </li>
      <li>
        <a href="#/">ITEM</a>
      </li>
      <li>
        <a href="#/">ITEM</a>
      </li>
      <li>
        <a href="#/">ITEM</a>
      </li>
      <li>
        <a href="#/">ITEM</a>
      </li>
      <li>
        <a href="#/">ITEM</a>
      </li>
      <li>
        <a href="#/">ITEM</a>
      </li>
      <li>
        <a href="#/">ITEM</a>
      </li>
      <li>
        <a href="#/">ITEM</a>
      </li>
      <li>
        <a href="#/">ITEM</a>
      </li>
      <li>
        <a href="#/">ITEM</a>
      </li>
      <li>
        <a href="#/">ITEM</a>
      </li>
      <li>
        <a href="#/">ITEM</a>
      </li>
      <li>
        <a href="#/">ITEM</a>
      </li>
      <li>
        <a href="#/">ITEM</a>
      </li>
      <li>
        <a href="#/">ITEM</a>
      </li>
      <li>
        <a href="#/">ITEM</a>
      </li>
      <li>
        <a href="#/">ITEM</a>
      </li>
      <li>
        <a href="#/">ITEM</a>
      </li>
      <li>
        <a href="#/">ITEM</a>
      </li>
    </ul>
  </nav>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
  <!--Both pages share the same external script-->
  <script src="lib/script.js"></script>
</body>

</html>

使用本地存储或cookie来检测菜单点击

2 个答案:

Plunker

演示