Question

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

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

添加缓存时间也是首选。例如，将用户localstorage中的布局保留“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
    }        
}

使用localstorage

1 个答案: