将 DIV 元素单击 3 次时替换为 Cookie 日志记录答案

【问题标题】：Replace DIV Element When Clicked On It 3 Times With Cookie Logging将 DIV 元素单击 3 次时替换为 Cookie 日志记录
【发布时间】：2020-01-06 17:53:07
【问题描述】：

我正在尝试使用 cookie 日志记录一次单击 3 次后替换 div 元素。我希望网络服务器记住元素被点击 3 次后何时被替换。也许用饼干？无论如何，当我刷新页面时，元素返回到默认状态下的未更改状态。

我已经编写了一个 div 元素，当被点击 3 次时会改变 id。它用不同的 id 替换，但它没有 cookie 不记录它，所以之后，我刷新它返回到默认状态的页面，未替换。

function replaceAfter3Clicks(elem, newElem) {
    let count = 0;
    div1.addEventListener('click', () => {
        count ++;
        if (count === 3) {
            elem.parentNode.replaceChild(newElem, elem);
        }
    });
}

const div1 = document.querySelector('#id-1');

// pre-made second div for future replacement
const div2 = document.createElement('div');
div2.id = 'id-2';
div2.innerText = 'div 2';

replaceAfter3Clicks(div1, div2);

<div id="id-1"> div 1 </div>

【问题讨论】：

寻找localStorage。
到目前为止你尝试过什么？听起来您确切地知道自己想要什么，而且弄清楚它似乎没有问题。如果您遇到问题，请发布导致问题的代码，我们可以帮助您解决问题。

标签： javascript jquery html replace element

【解决方案1】：

为此，您需要以某种方式存储此信息。无论是在数据库中还是在 Cookie、sessionStorage、localStorage 中……下面是一个使用 sessionStorage 的例子

    $(document).ready(function(){
        if(sessionStorage.getItem('div')){
            const div1 = document.querySelector('#id-1');
            var newDiv = sessionStorage.getItem('div');
            var newId = sessionStorage.getItem('id')
            div1.id = newId;
            div1.innerText = newDiv;
        }
    });

    function replaceAfter3Clicks(elem, newElem) {
        let count = 0;
        div1.addEventListener('click', () => {
            count ++;
            if (count === 3) {
                sessionStorage.clear(); // Clear all sessionStorage
                sessionStorage.setItem('div', "div 2"); // First param is the name and the second is the value
                sessionStorage.setItem('id', "id-2");// First param is the name and the second is the value
                elem.parentNode.replaceChild(newElem, elem);
            }
         });
    }

    const div1 = document.querySelector('#id-1');

    // pre-made second div for future replacement
    const div2 = document.createElement('div');
    div2.id = 'id-2';
    div2.innerText = 'div 2';
    replaceAfter3Clicks(div1, div2);

在第一部分中，我们检查 sessionStorage 中是否存储了一个值如果存在我们取值并在 div 中改变

【讨论】：

【解决方案2】：

以下代码应该完全符合您的要求。出于多种原因，我使用 localStorage 而不是 cookie，除非您需要在服务器端处理数据，否则您可能也想使用它。

查看 MDN 上的 window.localStorage 和 window.sessionStorage 了解更多信息。

如果你仔细查看你的网页检查器，你会发现当前页面的数据存储，它会在调试时帮助你。

如果您有任何疑问，请告诉我。


function replaceAfter3Clicks(elem, newElem) {
    let count = 0;
    div1.addEventListener('click', () => {
        count ++;
        if (count === 3) {
            elem.parentNode.replaceChild(newElem, elem);
            localStorage.setItem('clicked', 'true');
        }
    });
}

const div1 = document.querySelector('#id-1');

// pre-made second div for future replacement
const div2 = document.createElement('div');
div2.id = 'id-2';
div2.innerText = 'div 2';

if (localStorage.getItem('clicked') === 'true') {
    div1.parentNode.replaceChild(div1, div2);
} else {
  replaceAfter3Clicks(div1, div2);
}


<div id="id-1"> div 1 </div>

【讨论】：

我建议将条件移到 click 函数中，否则只有在重新加载页面时才会起作用。