使用 localStorage 记住一个列表视图

Question

我对 Javascript 比较陌生。经常拼凑，很少写，yadda yadda。所以我目前的任务是创建一个列表并让它在标准列表或网格项目视图之间交换。这部分我或多或少已经弄清楚了——我不知道的是如何做到这一点，以便在重新加载和多个页面之间记住状态（我们的列表分页）。

这是代码的组成部分：

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 东西还是新手，所以如果上面只是 atrocious 脚本，我深表歉意。

Answer 1

这段代码应该可以工作。 （让本地存储在 StackOverflow 沙箱之外运行）

基本上，您只想将视图的最后一个已知状态保存为字符串 '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>