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>
目录
相关文章
|
10天前
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
93 1
|
1月前
|
JSON 前端开发 Java
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
文章介绍了Java后端如何使用Spring Boot框架响应不同格式的数据给前端,包括返回静态页面、数据、HTML代码片段、JSON对象、设置状态码和响应的Header。
121 1
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
|
10天前
|
JSON Dart 数据格式
<大厂实战场景> ~ flutter&鸿蒙next处理后端返回来的数据的转义问题
在 Flutter 应用开发中,处理后端返回的数据是常见任务,尤其涉及转义字符时。本文详细探讨了如何使用 Dart 的 `dart:convert` 库解析包含转义字符的 JSON 数据,并提供了示例代码和常见问题的解决方案,帮助开发者有效处理数据转义问题。
106 0
|
1月前
|
JavaScript 前端开发
vue3教程,如何手动获取后端数据(入门到精通3,新人必学篇)
本文提供了一个Vue 3教程,讲解了如何使用axios库手动从后端获取数据,包括安装axios、配置后端访问地址、编写路由地址、发起HTTP请求以及在组件中读取和打印响应数据的步骤。
252 0
vue3教程,如何手动获取后端数据(入门到精通3,新人必学篇)
|
27天前
|
JSON 数据可视化 JavaScript
低代码可视化-uniapp响应式数据data-代码生成器
低代码可视化-uniapp响应式数据data-代码生成器
33 0
|
2月前
|
JSON 数据格式
Blob格式转json格式,拿到后端返回的json数据
文章介绍了如何将后端返回的Blob格式数据转换为JSON格式,并处理文件下载和错误提示。
72 0
Blob格式转json格式,拿到后端返回的json数据
|
29天前
|
前端开发 Java 数据库
springBoot:template engine&自定义一个mvc&后端给前端传数据&增删改查 (三)
本文介绍了如何自定义一个 MVC 框架,包括后端向前端传递数据、前后端代理配置、实现增删改查功能以及分页查询。详细展示了代码示例,从配置文件到控制器、服务层和数据访问层的实现,帮助开发者快速理解和应用。
|
3月前
|
前端开发 JavaScript
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
这篇文章介绍了使用AJAX技术将前端页面中表单接收的多个参数快速便捷地传输到后端servlet的方法,并通过示例代码展示了前端JavaScript中的AJAX调用和后端servlet的接收处理。
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
|
3月前
|
小程序 JavaScript Java
微信小程序+SpringBoot接入后台服务,接口数据来自后端
这篇文章介绍了如何将微信小程序与SpringBoot后端服务进行数据交互,包括后端接口的编写、小程序获取接口数据的方法,以及数据在小程序中的展示。同时,还涉及到了使用Vue搭建后台管理系统,方便数据的查看和管理。
微信小程序+SpringBoot接入后台服务,接口数据来自后端
|
3月前
|
JavaScript 前端开发
Vue中传递自定义参数到后端、后端获取数据(使用Map接收参数)
这篇文章讲述了如何在Vue中通过Axios二次封装传递自定义参数到后端,并展示了后端如何使用Map接收这些参数,以及如何避免参数转换错误和统一接口设计的方法。