时间戳

首页 > 解决方案 > 使用 javascript 和本地存储在动态 div 中设置已访问链接的样式

javascript - 使用 javascript 和本地存储在动态 div 中设置已访问链接的样式

问题描述

我想删除动态div内访问链接中的动画（div使用jQuery每秒更改一次），基于本地存储和javascript，问题是第一次更新数据后动画恢复（div重新初始化新数据和 js 代码在那之后停止工作）。

问题就在这里（5秒后动画回归故事）：https ://www.fussball-liveticker.eu/hamburger-sv-live-stream-ticker-heute 。

屏幕截图：在此处输入图像描述）

我的js代码：

function check_visited_links() {
var visited_links = JSON.parse(localStorage.getItem('visited_links')) || [];
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    var that = links[i];
    that.onclick = function () {
        var clicked_url = this.href;
        if (visited_links.indexOf(clicked_url)==-1) {
            visited_links.push(clicked_url);
            localStorage.setItem('visited_links', JSON.stringify(visited_links));
        }
    }

    if (visited_links.indexOf(that.href)!== -1) { 
        that.className += ' visited';
    }
}
}

check_visited_links();

我的CSS：

a.visited svg {
    animation: null;
  }
  .story svg {
    fill:none;
    stroke:rgb(218, 218, 218);
    stroke-width:3px;
    stroke-dasharray:1;
    stroke-dashoffset:0;
    stroke-linecap: round;
    animation:loading 3000ms ease-in-out infinite alternate;
  }

标签： javascripthtmljquerycss

解决方案

我测试了，你的 localStorage 没有写。

也许有帮助：

let visitedStorageKey = 'visited';

let initVisitedLinks = () => {
    let visited = JSON.parse(localStorage.getItem(visitedStorageKey)) || [];

    visited.forEach((el) => {
        let currentLink = document.querySelector(`[href='${el}']`);

        if (currentLink) {
            currentLink.classList.add('visited');
        }
    })
}

let initVisitedListeners = () => {
    let links = document.querySelectorAll('a');
    let visited = JSON.parse(localStorage.getItem(visitedStorageKey)) || [];

    for (let link of links) {
        link.addEventListener('click', function(ev) {
            if (visited.indexOf(this.getAttribute('href')) == -1) visited.push(this.getAttribute('href'));
            this.classList.add('visited');
            localStorage.setItem(visitedStorageKey, JSON.stringify(visited));
        })
    }
}

initVisitedLinks();
initVisitedListeners();

推荐阅读