您好，我已經制作了這個 js 代碼來將視圖從串列更改為網格，反之亦然，但我想在重繪 頁面后保持當前視圖狀態，我看過很多關于 cookie 和 localStorage 的視頻，但我不知道如何使用它們，因為我還是編程的初學者，你能告訴我怎么做嗎？
腳本.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';
}
});
索引.php：
<i class="" id="x"></i>
<div class="list" id="z">
.
centent
.
</div>
uj5u.com熱心網友回復：
你可以：
- 從加載存盤的類
localStorage - 查看它是否有效并且與當前類不同
- 每次單擊時存盤其當前值
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);
});
由于 stackoverflow.com 認為直接操作 withlocalStorage是不安全的，因此我不得不創建一個 Fiddle 來進行概念驗證。見這里：https ://jsfiddle.net/q68vnctL/
您可以通過運行它進行測驗，單擊“點擊我！” 按鈕任意多次，再次單擊“運行”并查看顏色保持不變。
uj5u.com熱心網友回復：
localstorage 用作鍵值對，兩者都是字串。
你可以使用localStorage.setItem('view-setting', 'list'). 這將創建一個名為 localstorage 的變數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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/447379.html
標籤：javascript php html 列表显示 网格视图
上一篇：將選項設定為使用php