使用 localstorage 从 onclick 功能保存和检索用户布局首选项

Question

我是使用 localstorage 的新手，但我相信这是我需要使用它来存储我的 css 文件中的特定 ID 或 CLASS 以在用户做出选择（点击事件时）显示后在用户浏览器中显示“网格/列表”布局。这里首选本地存储吗？或者使用“sessionstorage”会更好吗？还是完全使用完全不同的方法会更好？如果有，是什么？

我想要实现的是： 用户点击 2 个图标中的 1 个 - 这些图标需要存储我制作的 css 布局 ID 或 CLASS（“舒适”或“列表”视图）。当用户浏览网站的其他页面时，会记住此首选项，因此如果用户返回此页面，布局仍然与他/她选择的相同。如果用户关闭浏览器然后将其重新打开到该页面，同样适用。

添加时间缓存也是首选。例如，将布局在用户本地存储中保留“x”天，然后才被清除。

任何帮助将不胜感激，因为我什至不知道如何开始。我查看了大量示例，但似乎无法理解他们是如何做到的，更糟糕​​的是，我看到的示例似乎无法满足我的需求。

这是我目前所拥有的：

JS

// Changing layout 'Cozy' to 'List'
$('.news_nav-options_list').on('click', function () {
    var cozy=document.getElementById('hideClass');
    cozy.style.display="none";

    var list=document.getElementById('showClass');
    list.style.display="block";

    $(this).addClass('active');
    $('.news_nav-options_cozy').removeClass('active');
});

// Changing layout 'List' to 'Cozy'
$('.news_nav-options_cozy').on('click', function () {
    var list=document.getElementById('hideClass');
    list.style.display="block";

    var cozy=document.getElementById('showClass');
    cozy.style.display="none";

    $(this).addClass('active');
    $('.news_nav-options_list').removeClass('active');
});

这是我目前所拥有的演示：

DEMO

我阅读时首选使用带有 localstorage 的“.setItem() 和 .getItem”，但同样，我什至不知道应该如何开始。可以将 localstorage 应用到我目前的 js 中吗？

Answer 1

这并不完全正确，但我认为它应该为您指明您正在寻找的方向。

$(document).ready(function(){
    // Changing layout 'Cozy' to 'List'
    $('.news_nav-options_list').on('click', function () {
        changeToListView();
    });

    // Changing layout 'List' to 'Cozy'
    $('.news_nav-options_cozy').on('click', function () {
        changeToCozyView();
    });

    if (typeof(Storage) !== "undefined") {
        var view = localStorage.getItem("view");
        if (view && view == "cozy") {
            changeToCozyView();
        } else if (view && view == "list") {
            changeToListView();
        } else {
            // view isn't set, or is set to something we don't recognize
        }
    } else {
        // user's browser doesn't support localStorage
    }        
});

function changeToListView() {
    var cozy=document.getElementById('hideClass');
    cozy.style.display="none";

    var list=document.getElementById('showClass');
    list.style.display="block";

    storagePut("list");

    $(this).addClass('active');
    $('.news_nav-options_cozy').removeClass('active');
}

function changeToCozyView() {
    var list=document.getElementById('hideClass');
    list.style.display="block";

    var cozy=document.getElementById('showClass');
    cozy.style.display="none";

    storagePut("cozy");

    $(this).addClass('active');
    $('.news_nav-options_list').removeClass('active');
}

function storagePut(view) {
    if (typeof(Storage) !== "undefined") {
        localStorage.setItem("view", view);
    } else {
        // user's browser doesn't support localStorage
    }        
}