贺老在知乎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只能改变访问过元素的
真是眼界大开啊，之前从未遇到过这样的问题。贺老继续问道，问题出现之后不能抛下不管，那么应该如何解决呢？
live中有人提到了一些 css奇淫技巧，用localStorage存取点击链接的索引，交给后端解决等。
css奇淫技巧是提前设置好a标签元素的内容，让“已阅读”文字颜色与背景色一致，点击后更改“已阅读”文字颜色，确实很棒，但是也有缺点，全选之后就全露馅了。。
与由于我不是很熟悉后端这边具体的解决思路，于是决定使用localStorage存取点击过的连接来实现，那么接下来就是实践部分：
如果不太熟悉localStorage，首先请阅读：《localStorage和sessionStorage的区别》：http://www.cnblogs.com/diligenceday/p/4073136.html
下面是代码，css就不贴了
html:
js:
1 var a = Array.from(document.querySelectorAll("a"));//类数组对象转换为数组对象 2 3 a.forEach(function(e,index){ 4 e.addEventListener("click",function(){ 5 if(window.localStorage){ //判断浏览器是否可以使用localStorage 6 if(!localStorage.getItem(index)) //防止重复设置 7 { 8 localStorage.setItem(index,"(====已读)"); 9 }10 }11 else{12 alert("浏览器不支持localStorage")13 }14 });15 })16 window.addEventListener("load",function(){ 17 var localS=Array.from(localStorage);18 localS.forEach(function(e,index){ //当页面重载，查询localStorage是否存在，19 20 if (localS[index]) {21 a[index].innerHTML+=localS[index]; //改变每个被点击过的元素的innerHTML22 } 23 24 })25 }) 运行效果：
大概思路：每个a标签被点击》设置localStorage{“index”，“已读”}》window监听load事件》如果localStorage存在一个索引相对的“已读”》设置a数组中该索引的a元素的innerHTML=“已读”
文章中如果出现错误，请果断评论指出，谢谢
文章为原创，转载请注明出处