贺老在知乎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:

                <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=“已读”

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

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

《前端们,贺老 Live 面试你了!》所引发的思考与实践的更多相关文章

  1. 前端 & 技术团队 TL & 如何面试 & 如何带人

    前端 & 技术团队 TL & 如何面试 & 如何带人 面试 带人 作为 TL,深度了解你的团队非常重要,要去了解每个人的想法是什么,他的诉求是什么,他目前的状态怎么样,以及对他 ...

  2. 「微前端实践」使用Vue+qiankun微前端方案重构老项目的本地验证

    10月份换了新的工作,参与完一个月的需求迭代后,接到了项目重构的任务.简单来说,需要在短时间内提出方案设想,同时进行本地验证,最终需要拿出一套技术替换方案来.于是,埋头苦干了一个月,总算干了点成绩出来 ...

  3. 由面试引发的思考:B/S与C/S究竟是何物

    一.现状说明: 就在这金三银四的求职黄金时期,我有幸作为公司的独立技术面试官,拥有最终决定录用权,在倍受上级领导的充分信任下,我也向上级保证,一定要为公司找到合适的人才,就在我满怀信心的情况下面试了一 ...

  4. 腾讯IVWEB前端工程化工具feflow思考与实践

    本篇文章主要介绍腾讯IVWEB团队从0到1在工程化的思考和实践.feflow的全称是Front-end flow(前端工作流),致力于提升研发效率和规范的工程化解决方案.愿景是通过feflow,可以使 ...

  5. 前端HR告诉你—如何面试Web前端开发

    分享一篇HR前端面试心得: 面试前端工程师对我来说是一件非常有意思的事,因为面试过程很大程度上也是自我提升的过程.无论大公司还是小公司,之所以在如何招聘到真正有能力的,前端工程师方面会遇到同样的问题. ...

  6. 记作为前端开发人员跑去面试C#.NET

    先谈结果,"秦总",与我面试讨论一个半小时,十分感动,然后拒绝了我. 本月17日16时许,收到邀请,于18日9时到司面试,虽如今仅深入前端领域,皆因曾有1年ASP.NET(C#)的 ...

  7. 25、前端知识点--webpack篇之面试考点

    前端面试之webpack篇 https://blog.csdn.net/sinat_17775997/article/details/78122999 关于webpack的面试题 随着现代前端开发的复 ...

  8. 石火电光追风逐日|前端优化之次时代图片压缩格式WebP的项目级躬身实践(Python3 PIL+Nginx)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_190 我们知道,在前端界有一个共识:速度就是生命,带宽就是金钱.怎样将页面加载速度有效提升是无数前端工程师无时不刻在思考的课题,目 ...

  9. 前端通信:SSE设计方案(二)--- 服务器推送技术的实践以及一些应用场景的demo(包括在线及时聊天系统以及线上缓存更新,代码热修复案例)

    距离上一篇博客,这篇文章的发布大概过了整整三个月.我也从饿了么度过了试用期,成为了正式员工.刚进来恰好遇到项目底层改造和迁移,将项目从angular全部迁移到vue上,所以适应这边的节奏和业务的开发任 ...

随机推荐

  1. [GodLove]Wine93 Tarining Round #10

    比赛链接: http://www.bnuoj.com/v3/contest_show.php?cid=4159 题目来源: lrj训练指南---几何算法 Flag ID Title   A Board ...

  2. IOS 更改百度地图的定位图片

    使用了百度地图的SDK,定位图片一直是蓝色的小圆点,很不喜欢,想换成自定义的图片,在网上搜罗了一大通,找到了解决的方案. 写下如下代码: //定位图层自定义样式参数 BMKLocationViewDi ...

  3. imshow() displays a white image for a grey image

    Matlab expects images of type double to be in the 0..1 range and images that are uint8 in the 0..255 ...

  4. 从AutoCAD和.NET开始

    引自并参考Kean's blog:http://through-the-interface.typepad.com/through_the_interface/2006/07/getting_star ...

  5. LINUX各目录用处

    目录 应放置档案内容 / 根目录 /bin 放置可执行文件 /usr/bin 用户可执行文件 /usr/local/bin 用户本地可执行文件 /boot 开机需用文件,文件下vmlinuz为kern ...

  6. Ionic学习笔记三 Gulp在ionic中的使用

    简介 Gulp是一个基于流的自动化构建器. 安装 npm config set registry http://registry.npm.taobao.org ---最好用国内源 npm instal ...

  7. js按钮浮动随手指方向移动而移动

    window.document.getElementById("moveDIV").addEventListener("touchmove", function ...

  8. 转载《Android Adapter简单总结》

    1.概念 Adapter是连接后端数据和前端显示的适配器接口,是数据和UI(View)之间一个重要的纽带.在常见的View(List View,Grid View)等地方都需要用到Adapter.如下 ...

  9. gruntjs

    先输入命令: npm install -g grunt-clinpm install grunt --save-devgrunt –version 新建json文件:package.json { &q ...

  10. UIPickerView控件中自定义展示的字体大小及样式

    - (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger) ...