用户行为统计在如今的前端生态中已是稀松寻常，如各种站长统计工具。识别用户访问客户端唯一性是必要的实现，对于web前端获取的设备信息，一般容易想到的是通过navigator.userAgent，但相同设备及浏览器ua就相同了，故ua的辨识度很低，那么web前端识别浏览器设备唯一性是否有其他好办法？

先来说说FingerPrint ，也就是我们常说的指纹识别，FingerprintJS框架可以去github看看介绍，web指纹识别技术通过提取设备的各种特征，据说能达到94%的匿名浏览器区分度。因为这不是本文重点，所以这里不再展开。那就是还有其他办法？没错，而且足够的简单，不过毕竟适合场景的才是最好的，未必更好但的确值得一试。

你可能早就听过一个被人诟病的h5 api：app cache，没错，接下来我们就用它来实现浏览器设备的唯一性识别。我们结合实例来看看，总共用到3个不到1k的小文件：

1.index.html 业务页面，通过iframe标签引入uuid.html页面

2.uuid.appcache app cache 所需的一个配置文件

3.uuid.html 被index.html中的iframe引入，维持uuid的被cache页面

整个过程是这样的：

1.服务器端生成一个唯一识别码，写在作为维持uuid的uuid.html中，并标注<html manifest="uuid.appcache">

2.用户访问index.html，引入uuid.html后，执行的js可以读取到uuid

3.尝试修改uuid.html中的uuid，在微信浏览器中访问N次，读取到的uuid都是第一次被缓存的uuid。

也就是说，通过给用户打上一个无法销毁的识别码，达到了识别浏览器设备唯一性的目的。

测试时可以用python -m SimpleHTTPServer 8080起一个简单的测试服务器，使用微信内置浏览器测试。撰写者曾测试过的大多数设备都可行，尤其是在微信内置浏览器中的表现：即使是关闭微信或是重启手机，uuid也不会清除。请小心使用，若必要时需修改uuid，除了修改访问的uri以外，还可以修改uuid.appcache中的任意内容或是修改uuid.html的命名。

以上就是本文的全部内容了，希望能对你现在正在考虑的业务起到一点点的帮助。按照惯例提供了代码附件，有需要可自行下载查看，最后感谢关注焦糖心得(JOTTOWN)。

[转] web前端js构造无法销毁的类UUID识别码，识别浏览器设备唯一性的更多相关文章

  1. web前端js过滤敏感词

    web前端js过滤敏感词 这里是用文本输入框还有文本域绑定了失去焦点事件,然后再遍历敏感词数组进行匹配和替换. var keywords=["阿扁","呵呵", ...

  2. WEB前端JS与UI框架

    前端Js框架汇总 概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人 ...

  3. web前端-js

    1. js基础语法 声明变量 var a = 10; 查看变量类型 typeof a; 打印,测试语句 alert(a); #使用弹出框显示 console.log(a);    #使用console ...

  4. Web前端js下载流文件

    前端下载文件大概有以下种: 1)a标签链接下载 <a href="url">点击链接下载</a> 2)表单form提交下载 var form = $(&qu ...

  5. Web前端JS实现轮播图原理

    实现轮播图有很多方式,但是html的结构都是一样的.本文使用了Jquery框架,Dom操作更加方便灵活 html部分: <div class="banner"> < ...

  6. web前端js实现资源加载进度条

    进度条核心方法,通常j不考虑判断到100,根据项目中的图片数量可能有所差异所以到95就可以了 //根据图片load进度条 function loadingAsImgLength(){ var prec ...

  7. web前端js 实现打印操作

    转载来源:https://www.cnblogs.com/potatog/p/7412905.html 一.打印当前页面指定元素中的内容 方式一:直接使用window.print(); (1)首先获得 ...

  8. 【Web前端】清除css、javascript及背景图在浏览器中的缓存

    在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的 ...

  9. web前端性能优化总结

    网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现.并且影响用户访问体验的绝大部分来自前端页面 ...

随机推荐

  1. 内核探测工具systemtap简介【转】

    转自:http://www.cnblogs.com/hazir/p/systemtap_introduction.html systemtap是内核开发者必须要掌握的一个工具,本文我将简单介绍一下此工 ...

  2. window安装mysql(详细步骤）

    前两天电脑炸了,就重新装了系统重新安装了一遍mysql. 首先 你需要有一个安装包哈哈哈,mysql的安装包. 最好不要安装在c盘呦~ 来进入正题吧... ********************** ...

  3. 题解-bzoj2560 串珠子

    刚被教练数落了一通,心情不好,来写篇题解 Problem bzoj2560 题目简述:给定\(n\)个点的,每两个点\(i,j\)之间有\(c_{i,j}\)条直接相连的路(其中只能选一条或不选),问 ...

  4. 浏览器开启桌面通知Web Notification

    本文主要描述如何开启各个浏览器的桌面通知功能 一.谷歌浏览器(chrome) 点击地址栏前面的图标

  5. 阿里云服务器上通过Docker部署redmine

    背景:在日常工作的过程中会遇到各种各样的问题,每个问题来了之后需要花时间解决.这里就面临两个问题. 1:问题责任不明确,有时候会遇到数据库或者物理服务器的问题,这时候就需要把相应问题指派给相应的人,传 ...

  6. Vue-动态修改数组

    需求描述: 点击删除时,仅删除当前选中的这个对象. html: <el-card shadow="never" style="position: relative; ...

  7. 1)requests模块

    一:requests 介绍 requests 是使用 Apache2 Licensed 许可证的 基于Python开发的HTTP 库,其在Python内置模块的基础上进行了高度的封装, 从而使得Pyt ...

  8. Golang服务器热重启、热升级、热更新(safe and graceful hot-restart/reload http server)详解

    服务端代码经常需要升级,对于线上系统的升级常用的做法是,通过前端的负载均衡(如nginx)来保证升级时至少有一个服务可用,依次(灰度)升级. 而另一种更方便的方法是在应用上做热重启,直接更新源码.配置 ...

  9. Android录制音频的三种方式

    对于录制音频,Android系统就都自带了一个小小的应用,可是使用起来可能不是特别的灵活.所以有提供了另外的俩种. 下边来介绍下这三种录制的方式; 1.通过Intent调用系统的录音器功能,然后在录制 ...

  10. Codeforces 1110D Jongmah [DP]

    洛谷 Codeforces 我-我我把这-这这题切了??? 说实话这题的确不难,只是我看到有大佬没做出来有点慌-- 突然发现这题是我在洛谷的第500个AC呢.那就更要写篇题解纪念一下了. 思路 容易想 ...