如何在刷新页面后保持当前视图

Question

你好，我已经制作了这个 js 代码来将视图从 List 更改为 Grid，反之亦然，但我想在刷新页面后保持当前视图状态，我看过很多视频谈论 cookie 和 localStorage 但是我不知道如何使用它们，因为我还是编程的初学者，你能告诉我该怎么做吗？

script.js:

let x = document.getElementById('x');

let z = document.getElementById('z');

 x.addEventListener('click', function() {

    let className = z.className;
    if (className == 'list') {
        z.className = 'grid';

    }else{
        z.className = 'list';
    }

});

index.php:

 <i class="" id="x"></i>
<div class="list" id="z">
          .
       centent
          .
</div>

Answer 1

localstorage 用作 key-value 对，两者始终是字符串。

您可以使用 localStorage.setItem('view-setting', 'list')。这将创建一个名为 view-setting 的本地存储变量，并将其值定义为 list。您可以使用 localStorage.getItem('view-setting') 获取数据。类似地，可以使用 localStorage.removeItem('view-setting').

删除项目

所以在 localStorage 中设置视图后，您可以获取它并在重新加载时检查它的最后阶段并相应地在 HTTP 中添加条件。

您可以从以下渠道获得更多帮助：
Loading JS LocalStorage into PHP Variable
或者
https://www.w3schools.com/html/html5_webstorage.asp

Answer 2

您可以：

从localStorage
查看是否有效，是否与当前的不同class
在每次点击时存储其当前值

let x = document.getElementById('x');

let z = document.getElementById('z');

let cl = localStorage.getItem("class");

if (cl !== z.className) z.className = cl;

 x.addEventListener('click', function() {

    let className = z.className;
    if (className == 'list') {
        z.className = 'grid';

    }else{
        z.className = 'list';
    }
    localStorage.setItem("class", z.className);

});

由于whosebug.com认为直接操作localStorage是不安全的，我不得不为proof-of-concept创建一个Fiddle。看这里：https://jsfiddle.net/q68vnctL/

您可以通过运行测试它，点击“点击我！”多次点击按钮，再次点击“运行”，看到颜色保持原样。

如何在刷新页面后保持当前视图

How to keep the current view after refreshing the page

html

javascript

php

listview

gridview