Exploring the realm of localstorage for the first time, I am considering its use to store a specific ID or CLASS from my css file. This stored information would then be utilized to render a selected layout (grid/list) in the user's browser upon their interaction (click event). Should I opt for localstorage in this scenario? Or would sessionstorage be more suitable? Alternatively, is there a completely different method that might better serve this purpose? If so, what would it entail?
The goal I aim to achieve: When a user clicks on one of two icons representing "cozy" or "list" views, the chosen CSS layout ID or CLASS must be retained. As the user navigates through other pages on the website, this preference should persist so that upon returning to the initial page, the layout remains unchanged based on their selection. The same principle applies even if the user closes and reopens their browser while on that page.
In addition, implementing a time-based cache feature would be beneficial. For instance, maintaining the user's preferred layout in localstorage for a specified number of days before clearing it.
I would greatly appreciate any assistance as I am at a loss on where to begin with this task. Despite reviewing numerous examples, grasping the concept eludes me, especially since the available illustrations do not align with my requirements.
This is my current progress:
Javascript
// Switching 'Cozy' layout 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');
});
// Switching 'List' layout 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');
});
Below is a demonstration of my progress:
I have come across suggestions to utilize ".setItem() and .getItem" methods with localstorage, but I am clueless about how to proceed further. Can localstorage be integrated into the current javascript framework I have implemented?