# 05 主题集成友链访问统计

前段时间小站添加了不少友链，好奇这些友链的转换价值，偷偷在主题里埋了个小功能来统计这个无人小站的游客访问来源，目前已稳定运行了近半月，统计了下近期友链访问数据。

### document.referrer

这个统计功能主要是使用了[document.referrer](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/referrer)，它返回跳转或打开到当前页面的那个页面的 URI。如果用户直接打开了这个页面（不是通过页面跳转，而是通过地址栏或者书签等打开的），则该属性为空字符串。目前主流桌面浏览器基本都支持这个 API。

![Can I Use](https://3391885248-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M3u58XVueZWq507CWAj%2Fuploads%2Fgit-blob-a61153ae218f79ff2ae7c748a26f736cdbc9476d%2FCan_I_Use.png?alt=media)

### 代码实现

接下来先看下半个月所有访问这个无人小站的来源，如果是通过书签或者直接访问的话 document.referrer 为空，访问来源就是本站。好吧，从数据看起来这个站还真无人气，最后感谢下白喵的友链，居然能有辣么多人点进来看\~

![半月访问统计](https://3391885248-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M3u58XVueZWq507CWAj%2Fuploads%2Fgit-blob-bf6a53820eedf7961e1326137f3d45455a986ecb%2F%E5%8D%8A%E6%9C%88%E8%AE%BF%E9%97%AE%E7%BB%9F%E8%AE%A1.png?alt=media)

最后来一份实现代码：

```javascript
// 转换访问来源地址
const getLocation = (href) => {
  const a = document.createElement("a")
  a.href = href
  return a
}

// 统计访客数据
const visitorStatistics = () => {
  const referrer = getLocation(document.referrer)
  const hostname = referrer.hostname

  return new Promise((resolve) => {
    const query = new AV.Query("Visitor")
    const Visitor = AV.Object.extend("Visitor")
    query.equalTo("referrer", hostname)
    query
      .first()
      .then((res) => {
        // 存在则增加访问次数
        if (res) {
          res
            .increment("time", 1)
            .save(null, { fetchWhenSave: true })
            .then(() => resolve())
            .catch(console.error)
        } else {
          // 不存在则新建
          const newVisitor = new Visitor()
          newVisitor.set("referrer", hostname)
          newVisitor.set("time", 1)
          newVisitor
            .save()
            .then(() => resolve())
            .catch(console.error)
        }
      })
      .catch(console.error)
  }).catch(console.error)
}
```