How do I get document.querySelectorAll to store members of a class in sessionStorage or localStorage and display them on another page?

Question

Have been trying to get this code to work for the past 3 days and have really hit a wall. What I'm trying to do is create JS code that will retrieve article teasers within a certain topic from my home page (via class identifiers) and display them on a separate topic page (e.g. if the article is about a widget, the teaser also shows up on the Widget page).

I created a functioning code using document.getElementById, but it doesn't do what I need it to since you can only have one instance of an ID and there will be multiple articles within each topic (I've included this code for comparison for one class to simplify things). Therefore, I assume that I need either document.querySelectorAll or document.getElementsByClassName and must include code to add a div on the topic page in between each item for spacing.

Feel free to use a different approach. However, since I'm working with Visual Composer in WordPress, it needs to be Javascript. Thanks in advance for any help or suggestions!

Here's the code that works as long as you only need to select one item per topic (not the case):

window.onload = function filterContent() {
    // Check browser support
    if (typeof(Storage) !== "undefined") {
        // Retrieve
        var EV = document.getElementById("EV").innerHTML;
        window.localStorage.setItem('EVId', EV);
        var button =
        window.localStorage.getItem('address');
        document.getElementById("EV3").href = button;
     } else {
            document.getElementById("EV2").value = "Browser does not support Web Storage.";
     }
}

Here's my revised code using document.querySelectorAll. It's not working (disappears into a huge black hole). I've tried adding a few wrinkles, such as using the Array.from property (var EVArray = Array.from(EV)), but no luck:

window.onload = function Array() {
    if (typeof(Storage) !== "undefined")    
        {
        var EV = document.querySelectorAll('.EV');
        for (var i = 0; i < EV.length; i++) {
            let EVId = window.localStorage.setItem('EVId', EV);
            var EVResults = window.localStorage.getItem('EVId');
            document.querySelectorAll('.EV2').innerHTML = EVResults;
            var button =
            window.localStorage.getItem('address');
            document.querySelectorAll('.EV3').href = button;
        }
    } else {
        document.querySelectorAll('.EV2').value = "Browser does not support Web Storage.";}
    }
}

Answer 1

I have seen the following issues in your revised code:

1. You should never redefine the Array function. The Array function is a reserved function name. Kindly use a different name for your function.
2. document.querySelectorAll will alway return a NodeList. It will never return a single element. That means you cannot directly set or get values using innerHTML or other properties on the entire NodeList. In order to set or get values you will need to iterate through the NodeList and work with each individual element.

Here's is the corrected version of your code:

window.onload = function () {
    if (typeof (Storage) !== "undefined") {
        // Get all elements with the class 'EV'
        var EVElements = document.querySelectorAll('.EV');
        
        // Initialize an array to store the article data
        var articles = [];

        // Loop through each 'EV' element
        EVElements.forEach(function (EV, index) {
            // Get the content or data you want to store for each article
            var articleContent = EV.innerHTML;
            
            // Store the article content in an array
            articles.push(articleContent);

            // Store the article content in localStorage with a unique key
            window.localStorage.setItem('EVId' + index, articleContent);
        });

        // Save the articles array to localStorage if you want to access them on another page
        window.localStorage.setItem('articles', JSON.stringify(articles));

        // Store other data like button href if needed
        var button = window.localStorage.getItem('address');
        EVElements.forEach(function (EV) {
            EV.querySelector('.EV3').href = button;
        });
    } else {
        // Handle the case when the browser doesn't support Web Storage
        EVElements.forEach(function (EV) {
            EV.querySelector('.EV2').textContent = "Browser does not support Web Storage.";
        });
    }
}