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

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