javascript - 使用 localstorage 从 onclick 函数保存和检索用户布局首选项

Question

我是使用 localstorage 的新手，但相信这是我需要用来存储 css 文件中的特定 ID 或 CLASS 的内容，以便在用户做出选择(在单击事件上)以显示“网格/列表”布局。这里首选本地存储吗？或者使用“sessionstorage”会更好吗？或者完全使用完全不同的方法会更好吗？如果是这样，又是什么？

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

添加时间缓存也是首选。例如，在清除布局之前，将布局在用户本地存储中保留“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

我读到使用“.setItem() 和 .getItem” 与 localstorage 是首选，但同样，我不知道应该如何开始。 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
    }        
}