《前端们，贺老 Live 面试你了！》所引发的思考与实践

贺老在知乎live中提到了一个这样的问题：

　　产品经理提出了一个需求：用户点击文章阅读，返回之后阅读其他文章。当用户看得多了，容易点到自己看过的文章，造成时间浪费。所以想给点击过的文章加一个标记，如：《新闻一二三》-（已读）。问：如何实现

 

我想这问题简单啊，直接遍历给每个a标签添加click事件，点击后改变a标签内的文字。然后在微信群里就有人说:visited，我去，这个更好点，刚开始竟然没想到。

事实上，很多人入坑了，是我（们）有点naive。。。（大家可以自行尝试:visited是否可以实现= =）

贺老不断强调有思路很好，但是要写出来。不一会就有人说:visited实现不了，浏览器没反应，根本不渲染，然而我发现我的方法同样不能实现，这个时候贺老说：为什么不能实现，于是听众纷纷去谷歌。问题找到了：

“Privacy and the :visited selector”

详细内容请访问：https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector

原因由于浏览器的隐私保护，:visited只能改变访问过元素的

• color
• background-color
• border-color 
• outline-color

真是眼界大开啊，之前从未遇到过这样的问题。贺老继续问道，问题出现之后不能抛下不管，那么应该如何解决呢？

live中有人提到了一些 css奇淫技巧，用localStorage存取点击链接的索引，交给后端解决等。

css奇淫技巧是提前设置好a标签元素的内容，让“已阅读”文字颜色与背景色一致，点击后更改“已阅读”文字颜色，确实很棒，但是也有缺点，全选之后就全露馅了。。

与由于我不是很熟悉后端这边具体的解决思路，于是决定使用localStorage存取点击过的连接来实现，那么接下来就是实践部分：

如果不太熟悉localStorage，首先请阅读：《localStorage和sessionStorage的区别》：http://www.cnblogs.com/diligenceday/p/4073136.html

下面是代码，css就不贴了

html:

                <a href="http://www.baidu.com" >百度123</a>
        <a href="http://www.baidu.com" >百度222</a>
        <a href="http://www.baidu.com" >333</a>
        <a href="http://www.baidu.com" >444</a>
        <a href="http://www.baidu.com" >555</a>
        <a href="http://www.baidu.com">666</a>
        <a href="http://www.baidu.com">777</a>
        <a href="#dsad">888</a>            

js:

var a = Array.from(document.querySelectorAll("a"));//类数组对象转换为数组对象

        a.forEach(function(e,index){
            e.addEventListener("click",function(){
                if(window.localStorage){ //判断浏览器是否可以使用localStorage
                if(!localStorage.getItem(index)) //防止重复设置
                {
                    localStorage.setItem(index,"(====已读)");
                }
                }
                else{
                    alert("浏览器不支持localStorage")
                }
            });
        })
        window.addEventListener("load",function(){ 
            var localS=Array.from(localStorage);
            localS.forEach(function(e,index){ //当页面重载，查询localStorage是否存在，

                if (localS[index]) {
                    a[index].innerHTML+=localS[index]; //改变每个被点击过的元素的innerHTML
                }    
                
            })
        })

运行效果：

大概思路：每个a标签被点击》设置localStorage{“index”，“已读”}》window监听load事件》如果localStorage存在一个索引相对的“已读”》设置a数组中该索引的a元素的innerHTML=“已读”

文章中如果出现错误，请果断评论指出，谢谢

文章为原创，转载请注明出处