uniapp在不需要后端数据的情况下 怎么记录用户进一次记录一次

简介: uniapp在不需要后端数据的情况下 怎么记录用户进一次记录一次

前言:

一时兴起,不喜勿喷,今天听到了这个问题想到了一个方法,解决方式如下。

html部分

他用于显示访问次数(visitCount变量的值)。

<template>
  <view class="content">
    <view>
      <text>访问次数: {{ visitCount }}</text>
    </view>
  </view>
</template>

js部分

简单来说就是刚进入页面onload进行调用数值+1事件并且存一下,就这么简单

export default {
  data() {
    return {
      visitCount: 0,
    };
  },
  onLoad() {
    // 在页面加载时获取访问次数
    this.visitCount = uni.getStorageSync("visitCount") || 0;
    // 刚进入页面就调用
    this.incrementVisitCount()
  },
  methods: {
    incrementVisitCount() {
      this.visitCount++;
      uni.setStorageSync("visitCount", this.visitCount);
    },
  },
};
  • data()函数定义了页面的数据属性。在这里,我们定义了一个名为visitCount的数据属性,用于存储用户的访问次数,初始值为 0。
  • onLoad()钩子函数是 UniApp 生命周期的一部分,当页面加载时被触发。在这个函数中,我们首先尝试从本地存储中获取之前保存的访问次数(uni.getStorageSync("visitCount")),如果没有保存过,就使用默认值 0。然后,我们调用 incrementVisitCount 方法,这样页面一加载就会增加访问次数。
  • incrementVisitCount() 方法用于增加访问次数,并将新的访问次数保存到本地存储中。每次调用这个方法,visitCount 的值会增加 1,并使用 uni.setStorageSync("visitCount", this.visitCount) 保存到本地存储中,以便在下次加载页面时继续使用。

完整代码

<template>
  <view class="content">
    <view>
      <text>访问次数: {{ visitCount }}</text>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      visitCount: 0,
    };
  },
  onLoad() {
    // 在页面加载时获取访问次数
    this.visitCount = uni.getStorageSync("visitCount") || 0;
  // 刚进入页面就调用
  this.incrementVisitCount()
  },
  methods: {
    incrementVisitCount() {
      this.visitCount++;
      uni.setStorageSync("visitCount", this.visitCount);
    },
  },
};
</script>
目录
相关文章
|
3月前
|
前端开发 JavaScript
【面试题】面试官:如果后端给你 1w 条数据,你如何做展示?
【面试题】面试官:如果后端给你 1w 条数据,你如何做展示?
|
5月前
|
JSON 小程序 开发工具
uniapp获取接口数据,渲染在picker选择器里面
uniapp获取接口数据,渲染在picker选择器里面
76 0
|
4月前
uniapp页面之间通信、传参、传值方法(父→传→子,子→传→父);获取被打开页面的数据→传→当前页面;当前页面的数据→传→被打开页面
uniapp页面之间通信、传参、传值方法(父→传→子,子→传→父);获取被打开页面的数据→传→当前页面;当前页面的数据→传→被打开页面
|
2月前
|
存储
uniapp怎么存储用户登录的所有数据?
uniapp怎么存储用户登录的所有数据?
|
3月前
|
前端开发 JavaScript
工作这么久了,还不懂如何使用纯前端实现分页吗?-假如后端一股脑返回给你所有数据,让你自个实现分页该怎么办
工作这么久了,还不懂如何使用纯前端实现分页吗?-假如后端一股脑返回给你所有数据,让你自个实现分页该怎么办
76 0
|
3月前
|
小程序
uniapp 数据配置
uniapp manifest.js 配置
|
3月前
|
小程序 API
uniapp、微信小程序返回上页面刷新数据
uniapp、微信小程序返回上页面刷新数据
92 0
|
4月前
|
JSON 前端开发 Java
JAVA后端向前端传递Long类型数据,导致数据不一致
JAVA后端向前端传递Long类型数据,导致数据不一致
94 0
|
4月前
|
小程序 开发者
uniapp请求数据出现的问题(避个坑)
uniapp请求数据出现的问题(避个坑)
65 0
|
4月前
|
存储 JavaScript 数据处理
uniapp获取接口数据并渲染至页面中
uniapp获取接口数据并渲染至页面中
94 0