I am trying to toggle a view between grid and list view mode on my frontend HTML page. I am able to do this fine with dom and HTML classes manipulation by toggling "display: none" between two containers. However, when I go to the next product page(through pagination) or when I reload the page, the default view is the one that appears and not the one that was last toggled. Is there a way to persist the view in case a page reload or product pagination changes? thank you.

here is the dom code that achieves this :

viewList.addEventListener('click', function() {
    this.classList.add('view__active');
    viewGrid.classList.remove('view__active');
    gridItem.classList.add('hidden');
    listItem.classList.remove('hidden');
});
viewGrid.addEventListener('click', function() {
    this.classList.add('view__active');
    viewList.classList.remove('view__active');
    gridItem.classList.remove('hidden');
    listItem.classList.add('hidden');
});

So far I found that I have to use localStorage to achieve this. but is there a better way to do this?

CodePudding user response：

Essentially what is happening is when you request something from the server, the server responds with an HTML document, and whichever scripts associated with that document is run, So whatever JS executed in the first request is not in context when the second request(paginate or reload) is made.

So you need a way to persist information across these page loads, For that, you have 3 options.

1. Use sessionStorage.

2. Use localStorage

3. Use Cookies.

Of the 3 above the easiest would be to use either option 1 or 2.

Replying to your comment,

Also, If I am using localStorage, What am I using to store the view state?

I'm not quite clear as to what you mean by "What you are using to store the state" If your question is about where your data is stored, you need not worry about it as this is handled by the browser. If your question is about "How" to store it you can go through the MDN docs attached in option 1 or 2. This is simply storing a key-value pair as shown in the docs localStorage.setItem('preferedView', 'grid'); You can add this to your on click handlers as follows,

viewList.addEventListener('click', function() {
    this.classList.add('view__active');
    viewGrid.classList.remove('view__active');
    gridItem.classList.add('hidden');
    listItem.classList.remove('hidden');
    localStorage.setItem('preferedView', 'grid');
});
viewGrid.addEventListener('click', function() {
    this.classList.add('view__active');
    viewList.classList.remove('view__active');
    gridItem.classList.remove('hidden');
    listItem.classList.add('hidden');
    localStorage.setItem('preferedView', 'list');
});

Then when loading a new page at the top of your script you can get the users preferedView(if existing) via const preferedView = localStorage.getItem('preferedView');

Here is a complete example from MDN

CodePudding user response：

In order for anyone to find an answer for a similar task, thanks to @Umendra insight, I was able to solve this by using this :

function viewToggeler(viewBtn1, viewBtn2, view1, view2, viewStord) {
    viewBtn2.classList.add('view__active');
    viewBtn1.classList.remove('view__active');
    view1.classList.add('hidden');
    view2.classList.remove('hidden');
    sessionStorage.setItem('preferedView', viewStord);
}

viewList.addEventListener('click', () => {
    viewToggeler(viewGrid, viewList, gridItem, listItem, 'list');
});
viewGrid.addEventListener('click', () => {
    viewToggeler(viewList, viewGrid, listItem, gridItem, 'grid');
});

if (sessionStorage.getItem('preferedView') === 'grid') {
    viewToggeler(viewList, viewGrid, listItem, gridItem, 'grid');
} else if (sessionStorage.getItem('preferedView') === 'list') {
    viewToggeler(viewGrid, viewList, gridItem, listItem, 'list');
}

I ended up using sessionStorage over localStorage because it empties itself on window/tab closing which might be the most desirable result. localStorage persists even after exiting the browser and opening it back.

Also, at any point someone wants to empty the sessionStorage on exit, I used :

window.addEventListener('onbeforeunload', () => {
    sessionStorage.removeItem('preferedView');
});