DOM elements manipulation with javascript persists after reload or going to next page in pagination

Question

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?

is there any reason why you do not want to use localStorage? Also, going to the next product page is also a new page load(A.K.A new request-response cycle)? or are we dealing with a SPA like React? — Umendra Rajapakshe, Mar 29 '22 at 18:47
yes, it is a new request-response cycle when going to the next page (Express + MongoDB). but Still, I want to persist with the same view still unless the user chose to change the view type. Also, If I am using localStorage, What am I using to store the view state? — Youssef Fannichi, Mar 29 '22 at 18:52

score 1 · Answer 1 · answered Mar 29 '22 at 19:14

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.

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

If you want to understand more about the above 3 options refer to this, https://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies — Umendra Rajapakshe, Mar 29 '22 at 19:19

score 0 · Answer 2 · answered Mar 30 '22 at 01:17

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');
});

DOM elements manipulation with javascript persists after reload or going to next page in pagination

2 Answers2