前端获取链接网址key值对象，访问的设备型号等

有时候我们业务需要拿到页面跳转过去附带的key值对象以及用户设备型号，用以业务订购或其它操作。

例如跳转到业务链接为：http://localhost:3000/?adid=__AID__&creativeid=__CID__&creativetype=__CTYPE__&clickid=__CLICKID__

我们需要用到adid、clickid等以上值并获取到用户的设备信息，附加到业务请求中。

第一步：

1. 获取设备信息

先下载UA库(以react为例)：

// 项目下载依赖
npm install ua-parser-js

// 引入ua库
import parser from 'ua-parser-js'

// 获取手机型号 并打印
const { device: { model } } = parser(navigator.userAgent)
console.log(model);

如图(以Samsung Galaxy S8+手机为例)：

2.  获取url中的key值对象

// 使用new URLSearchParams函数生成对象 处理字符串
const params = new URLSearchParams(window.location.search);

// 使用get方法获取到cpid的值
const cpid = params.get('cpid');

// 如果需要获取全部对象 可通过 Object.fromeEntries() 来获取参数对象
const mediaParams = Object.fromEntries(params)；

// 打印结果
console.log(cpid,mediaParams);

如图：