javascript - 缓存用户点击列表项选择

Question

我有一个元素列表，然后有网格、列表和紧凑 View 的更改 View 选项。当用户打开链接时默认将是一个网格(我已经实现了)。我想要实现的是当用户点击 ListView 然后下次用户再次打开该页面时，它应该是用户上次选择的 View 。 JSFiddle here

这是我的代码:

$('li').on('click', function(e) {
  if ($(this).hasClass('grid')) {
    $('#container ul').removeClass('list').addClass('grid');
  }
  if ($(this).hasClass('grid')) {
    $('#container ul').removeClass('compact').addClass('grid');
  }

  if ($(this).hasClass('list')) {
    $('#container ul').removeClass('grid').addClass('list');
  }
  if ($(this).hasClass('list')) {
    $('#container ul').removeClass('compact').addClass('list');
  }
  if ($(this).hasClass('compact')) {
    $('#container ul').removeClass('list').addClass('compact');
  } else if ($(this).hasClass('compact')) {
    $('#container ul').removeClass('grid').addClass('compact');
  }
});

$('document').ready(function() {
  $('.menu li').click(function() {
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
    var $div = $('#' + $(this).data('href'));
    $('.demo').not($div).hide();
    $div.slideToggle();
  });
});

.menu ul li button:hover {
  background-color: rgba(206, 0, 0, 1);
}

.active {
  background-color: rgba(30, 30, 30, 1);
}

#container ul {
  list-style: none;
}

#container .buttons {
  margin-bottom: 20px;
}

#container .list li {
  width: 100%;
  border-bottom: 1px dotted #CCC;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

#container .grid li {
  float: left;
  width: 20%;
  height: 50px;
  border-right: 1px dotted #CCC;
  border-bottom: 1px dotted #CCC;
  padding: 20px;
}

#container .compact li {
  float: left;
  width: 30%;
  height: 50px;
  border-right: 1px dotted #CCC;
  border-bottom: 1px dotted #CCC;
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul>
    <li class="grid"> <a href='#' id="show2">Grid</a></li>
    <li class="list"> <a href='#' id="show3">List</a></li>
    <li class="compact"> <a href='#' id="show1">Compact</a></li>
  </ul>
</div>

<div id="container">
  <ul class="grid">
    <li>Item 2</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>
  <div>
  </div>

Answer 1

一种方法是将选择存储为 cookie，然后在文档加载时检查该 cookie 并相应地设置布局，例如

$('li').on('click', function(e) {
  if ($(this).hasClass('grid')) {
    document.cookie = "menuChoice=grid";
    $('#container ul').removeClass('list').addClass('grid');
    $('#container ul').removeClass('compact').addClass('grid');
  }

  if ($(this).hasClass('list')) {
    document.cookie = "menuChoice=list";
    $('#container ul').removeClass('grid').addClass('list');
    $('#container ul').removeClass('compact').addClass('list');
  }
  if ($(this).hasClass('compact')) {
    document.cookie = "menuChoice=compact";
    $('#container ul').removeClass('list').addClass('compact');
    $('#container ul').removeClass('grid').addClass('compact');
  }
});

$('document').ready(function() {
  switch (getCookie("menuChoice")) {
    case 'grid':
      $('#container ul').removeClass('list').addClass('grid');
      $('#container ul').removeClass('compact').addClass('grid');
      break;
    case 'list':
      $('#container ul').removeClass('list').addClass('list');
      $('#container ul').removeClass('compact').addClass('list');
      break;
    case 'compact':
      $('#container ul').removeClass('list').addClass('compact');
      $('#container ul').removeClass('compact').addClass('compact');
      break;
    default:
      break;
  }
  $('.menu li').click(function() {
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
    var $div = $('#' + $(this).data('href'));
    $('.demo').not($div).hide();
    $div.slideToggle();
  });
});

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

.menu ul li button:hover {
  background-color: rgba(206, 0, 0, 1);
}

.active {
  background-color: rgba(30, 30, 30, 1);
}

#container ul {
  list-style: none;
}

#container .buttons {
  margin-bottom: 20px;
}

#container .list li {
  width: 100%;
  border-bottom: 1px dotted #CCC;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

#container .grid li {
  float: left;
  width: 20%;
  height: 50px;
  border-right: 1px dotted #CCC;
  border-bottom: 1px dotted #CCC;
  padding: 20px;
}

#container .compact li {
  float: left;
  width: 30%;
  height: 50px;
  border-right: 1px dotted #CCC;
  border-bottom: 1px dotted #CCC;
  padding: 20px;
}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul>
    <li class="grid"> <a href='#' id="show2">Grid</a>

    </li>
    <li class="list"> <a href='#' id="show3">List</a>

    </li>
    <li class="compact"> <a href='#' id="show1">Compact</a>

    </li>
  </ul>
</div>


<div id="container">
  <ul class="grid">

    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>


  <div>

  </div>

因为这是沙盒 cookie 不起作用，请参阅我的 JSfiddle http://jsfiddle.net/Alessi42/7Ln5dc2t/一个工作示例。

希望这对您有所帮助!