javascript - 使用 localStorage 记住 ListView

Question

我对 Javascript 比较陌生。经常拼凑，很少写出来，yadda yadda。所以我当前的任务是创建一个列表并让它在标准列表或网格项 View 之间交换。我或多或少已经弄清楚了这一部分 - 我还没有弄清楚如何做到这一点，以便在重新加载和多个页面之间记住状态(我们的列表分页)。

这是代码的组成部分:

HTML

<strong>View</strong>
    <div class="view">
        <a href="#" id="grid">List</a>
        <a href="#" id="list">Grid</a> 
    </div>
<div class="display">
<?php 
$temp = $wp_query; 
$wp_query = null; 
$wp_query = new WP_Query(); 
$wp_query->query('showposts=24&order=ASC&post_type=review'.'&paged='.$paged); 

while ($wp_query->have_posts()) : $wp_query->the_post(); 
?>
<div class="item list">
    <div class="thumb"><a href="<?php the_permalink(); ?>"><img src="<?php the_post_thumbnail_url( 'thumbnail' ); ?>"></a></div>
    <div class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
    <div class="author"><p>By <a href="<?php the_author(); ?>"><?php the_author(); ?></a></p></div>
    <div class="date"><?php the_date('d-m-Y'); ?></div>
</div>
<?php endwhile; ?>

javascript

$(document).ready(function() {
    $('#list').click(function(event){event.preventDefault();$('.item').addClass('grid');});localStorage.setItem('.item', grid);
    $('#grid').click(function(event){event.preventDefault();$('.item').removeClass('grid');localStorage.setItem('.item', list);
    (localStorage.getItem('.item') == 'grid') {

});

任何关于我做错了什么或如何更好地理解这个问题的帮助将不胜感激。再说一次，我对整个 .js 事情还是个新手，所以如果上面的脚本只是残暴脚本，我深表歉意。

Answer 1

这段代码应该可以工作。 (为了让本地存储正常工作，请在 StackOverflow 沙箱之外运行它)

基本上，您只想将 View 的最后已知状态保存为字符串'grid'或'list'

并将该值作为类应用于 $(document).ready()

$(document).ready(function() {
  $('#list').click(function(event) {
    event.preventDefault()
    $('.item').addClass('list')
    $('.item').removeClass('grid')
    localStorage.setItem('.item', 'list');
  });
  $('#grid').click(function(event){
    event.preventDefault();
    $('.item').addClass('grid')
    $('.item').removeClass('list')
    localStorage.setItem('.item', 'grid')
  })
  let itemClass = localStorage.getItem('.item')
  $('.item').addClass(itemClass)
});

.item.grid {
  display: inline-block;
  padding: 10px;
  border: 1px solid;
}

.item.list {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="list">List</button>
<button id="grid">Grid</button>

<br/>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>