js统计页面的来访次数实现代码

要实现 js 统计页面来访次数，需要用到以下步骤：

1. 创建一个用来记录访问次数的变量

首先，我们需要创建一个变量来储存网页的访问次数。这个计数器可以使用本地存储（localStorage）来保存，保证每次刷新页面访问次数不会被重置。

// 初始化访问次数为0
var pageViewCount = 0;

// 在本地存储中查找是否有访问次数
if (localStorage.getItem('pageViewCount')) {
  // 如果有，将其转换为数字并保存到计数器中
  pageViewCount = Number(localStorage.getItem('pageViewCount'));
}

// 增加访问次数并保存到本地存储中
pageViewCount++;
localStorage.setItem('pageViewCount', pageViewCount.toString());

1. 在页面中显示访问次数

<!-- 在页面中显示访问次数 -->
<p>本页面已被访问 {{ pageViewCount }} 次。</p>

以上代码实现了基本的统计访问次数的功能，每次访问页面时都会自动加一，统计并展示出来。接下来，我们来看两个使用示例。

示例一：在单页面应用中统计访问次数

在单页面应用中，因为只有一次页面渲染，所以需要使用 Vue 的数据绑定来实时更新访问次数。

<template>
  <div>
    <p>本页面已被访问 {{ pageViewCount }} 次。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageViewCount: this.getPageViewCount()
    };
  },
  methods: {
    getPageViewCount() {
      let pageViewCount = 0;
      if (localStorage.getItem('pageViewCount')) {
        // 如果有，将其转换为数字并保存到计数器中
        pageViewCount = Number(localStorage.getItem('pageViewCount'));
      }
      pageViewCount++;
      localStorage.setItem('pageViewCount', pageViewCount.toString());
      return pageViewCount;
    }
  }
};
</script>

以上代码使用了 Vue 的数据绑定来实时更新访问次数。通过使用 methods 中的 getPageViewCount() 函数来更新访问次数计数器，并将其储存在本地存储中。最后在模板中使用 pageViewCount 来显示出来。

示例二：在静态网站中统计访问次数

在静态网站中，因为没有后端支持，所以可以使用第三方服务来统计访问次数。这里以 LeanCloud 计数器 为例：

<!-- 引入 LeanCloud JS SDK -->
<script src="//cdn1.lncld.net/static/js/av-core-mini-0.6.9.js"></script>

<!-- 在页面中显示访问次数 -->
<p>本页面已被访问 <span id="page-view-count"></span> 次。</p>

<script>
// 初始化
AV.initialize("your_app_id", "your_app_key");

// 使用计数器来统计页面访问次数
var PageViewCount = AV.Object.extend("PageViewCount");
var query = new AV.Query(PageViewCount);
query.get("5e0a6c76c4ea8400088bf5a3").then(function(pageViewCount) {
  pageViewCount.save(null, {
    success: function(pageViewCount) {
      var count = pageViewCount.get('count') || 0;
      count++;
      pageViewCount.set('count', count);
      pageViewCount.save().then(function(pageViewCount) {
        document.getElementById('page-view-count').innerHTML = count;
      });
    }
  });
});
</script>

以上代码使用了 LeanCloud 计数器来统计页面访问次数。在获取到实例后将其属性 count 加 1，然后保存新的状态。最后将计数器显示在页面中。参考链接：https://leancloud.cn/docs/leanstorage-started-js.html#计数器