如何让 document.querySelectorAll 将类的成员存储在 sessionStorage 或 localStorage 中并将其显示在另一个页面上？

Question

过去 3 天一直试图让这段代码正常工作，但确实遇到了困难。我想做的是创建 JS 代码，该代码将从我的主页（通过类标识符）检索某个主题内的文章预告片，并将它们显示在单独的主题页面上（例如，如果文章是关于小部件的，则预告片也显示在小部件页面上）。

我使用 document.getElementById 创建了一个功能代码，但它没有执行我需要的操作，因为您只能有一个 ID 实例，并且每个主题中都会有多篇文章（我已包含此代码以进行比较为一类来简化事情）。因此，我假设我需要 document.querySelectorAll 或 document.getElementsByClassName，并且必须包含代码以在主题页面上的每个项目之间添加一个 div 以实现间距。

随意使用不同的方法。但是，由于我在 WordPress 中使用 Visual Composer，因此它需要是 Javascript。预先感谢您的任何帮助或建议！

只要您只需要为每个主题选择一项（并非如此），以下代码就可以工作：

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.";
        }
}

这是我使用 document.querySelectorAll 修改后的代码。它不起作用（消失在一个巨大的黑洞中）。我尝试添加一些皱纹，例如使用 Array.from 属性 (var EVArray = Array.from(EV))，但没有运气：

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

我在您修改后的代码中发现了以下问题：

1. 您永远不应该重新定义

   Array

   函数。

   Array

   函数是保留函数名称。请为您的函数使用不同的名称。

2. document.querySelectorAll

   将始终返回一个 NodeList。它永远不会返回单个元素。这意味着您无法直接使用

   innerHTML

   或整个 NodeList 上的其他属性来设置或获取值。为了设置或获取值，您需要迭代 NodeList 并处理每个单独的元素。

这是代码的更正版本：

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.";
        });
    }
}