微信小程序开发系列(三十)·小程序本地存储API·同步和异步的区别

目录

1.  同步API

1.1  getStorageSync存储API

1.2  removeStorageSync获取数据API

1.3  removeStorageSync删除

1.4  clearStorageSync清空

2.  异步API

2.1  setStorage存储API

2.2  getStorage获取数据API

2.3  removeStorage删除API

2.4  clearStorage清空

3.  同步和异步的区别 


1.  同步API

        小程序本地存储是指在小程序中使用API将数据存储在用户的设备上,以便小程序运行时和下次启动时快速地读取这些数据。

注意事项:对象类型的数据,可以直接进行存储获取,无需使用 JSON.stringify()、JSON.parse()转换。

        找到cate.wxml文件,注释或者删除之前内容,创建四个按钮:

<button size="mini" type="primary">存储</button>
<button size="mini" type="default">获取</button>
<button size="mini" type="primary">删除</button>
<button size="mini" type="warn">清空</button>

        此时按钮之间过于拥挤,我们可以找到cate.scss文件,给按键之间添加空隙:

button{margin: 34rpx;
}

        再次返回cate.wxml文件,给四个按钮添加事件:

<button size="mini" type="primary" bind:tap="setStorage">存储</button>
<button size="mini" type="default" bind:tap="getStorage">获取</button>
<button size="mini" type="primary" bind:tap="removeStorage">删除</button>
<button size="mini" type="warn" bind:tap="clearStorage">清空</button>

        找到cate.js文件,编写一个事件框架:

Page({// 将数据存储到本地setStorage(){},// 获取本地存储的数据getStorage(){},// 删除本地存储的数据removeStorage(){},// 清空本地存储的全部数据clearStorage(){}
})

1.1  getStorageSync存储API

        将以上代码setStorage()内容给改为:

  // 将数据存储到本地setStorage(){// 第一个参数:本地存储中指定的key// 第二个参数:需要存储的数据wx.setStorageSync('num',1)// 在小程序中如果存储的是对象类型的数据,可以直接进行存储获取,无需使用 JSON.stringify()、JSON.parse()转换wx.setStorageSync('obj', { name:'tom', age: 10 })},

        点击存储,会发现数据正常存储:

1.2  removeStorageSync获取数据API

        将getStorage()代码更改为:

  // 获取本地存储的数据getStorage(){// 从本地存储的数据中获取指定 key 的数据、内容// wx.getStorageSync('num')// wx.getStorageSync('obj')// 创建变量用于接收数据const num = wx.getStorageSync('num')const obj = wx.getStorageSync('obj')// 打印数据console.log(num)console.log(obj)},

        点击“获取”,可以看到在consle中打印出了获取到的数据:

注意:在这里我们会发现我们没有点存储,但是也能获取到数据,那是因为编译器本身存储的之前的数据,我们可以清空之前的数据,这样就可以了: 

1.3  removeStorageSync删除

        将removeStorage()的函数更改为:

  // 删除本地存储的数据removeStorage(){// 从本地移除指定key的数据内容wx.removeStorageSync('num')},

        点击删除:

1.4  clearStorageSync清空

        将clearStorage()更改为:

  // 清空本地存储的全部数据clearStorage(){wx.clearStorageSync()}

        点击清空,数据全部清空:


同步API完整Page代码:

Page({// 将数据存储到本地setStorage(){// 第一个参数:本地存储中指定的key// 第二个参数:需要存储的数据wx.setStorageSync('num',1)// 在小程序中如果存储的是对象类型的数据,可以直接进行存储获取,无需使用 JSON.stringify()、JSON.parse()转换wx.setStorageSync('obj', { name:'tom', age: 10 })},// 获取本地存储的数据getStorage(){// 从本地存储的数据中获取指定 key 的数据、内容// wx.getStorageSync('num')// wx.getStorageSync('obj')// 创建变量用于接收数据const num = wx.getStorageSync('num')const obj = wx.getStorageSync('obj')// 打印数据console.log(num)console.log(obj)},// 删除本地存储的数据removeStorage(){// 从本地移除指定key的数据内容wx.removeStorageSync('num')},// 清空本地存储的全部数据clearStorage(){wx.clearStorageSync()}
})

2.  异步API

2.1  setStorage存储API

        将setStorage()中的代码改为:

  // 将数据存储到本地setStorage(){wx.setStorage({key: 'num',data:1})wx.setStorage({key: 'obj',data: { name: 'jerry',age: 18}})},

        点击存储:

2.2  getStorage获取数据API

        将getStorage()更改为:

  // 获取本地存储的数据async getStorage(){const obj = await wx.getStorage({key:'obj'})console.log(obj)},

        点击获取:

        我们可以看到此时数据在data内,则可以更改代码:

  // 获取本地存储的数据async getStorage(){const { data } = await wx.getStorage({key:'obj'})console.log(data)},

        点击获取:

2.3  removeStorage删除API

        将removeStorage()更改为:

  // 删除本地存储的数据removeStorage(){wx.removeStorage({key:'num'})},

        点击删除:

2.4  clearStorage清空

         将clearStorage()更改为:

  // 清空本地存储的全部数据clearStorage(){wx.clearStorage()}

        点击清空:

3.  同步和异步的区别 

        小程序本地存储 API 提供了同步和异步两种方式进行数据的读写操作。它们的主要区别在于执行操作时是否会阻塞主线程

同步方式:在使用同步方式进行本地存储操作时,代码会阻塞主线程的执行,直到本地存储操作完成后才会继续执行后续代码。这意味着如果存储操作需要较长时间,会导致界面出现卡顿现象,影响用户体验。 

异步方式:在使用异步方式进行本地存储操作时,代码会立即返回,不会阻塞主线程的执行,而是通过回调函数或 Promise 来处理存储操作的结果。这样可以避免阻塞主线程,提高程序的流畅性和响应速度。

微信小程序开发_时光の尘的博客-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/740620.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

每天学习一个Linux命令之ifconfig

每天学习一个Linux命令之ifconfig 在Linux操作系统中&#xff0c;ifconfig命令是一个用来配置和显示网络接口的工具。它可以用来查看和修改网络接口的状态、IP地址、网关、子网掩码等信息。在本文中&#xff0c;我们将详细介绍ifconfig命令的使用方法和常用选项。 1. 命令语法…

Zookeeper搭建

目录 前言 初了解Zookeeper 搭建 准备 配置Zookeeper 前言 今天来介绍Zookeeper的搭建&#xff0c;其实Zookeeper的搭建很简单&#xff0c;但是为什么还要单独整一节呢&#xff0c;这就不得不先了解Zookeeper有什么功能了&#xff01;而且现在很火的框架也离不开Zookeepe…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的夜间车辆检测系统(深度学习代码+UI界面+训练数据集)

摘要&#xff1a;开发夜间车辆检测系统对于自动驾驶技术具有关键作用。本篇博客详细介绍了如何运用深度学习构建一个夜间车辆检测系统&#xff0c;并提供了完整的实现代码。该系统基于强大的YOLOv8算法&#xff0c;并对比了YOLOv7、YOLOv6、YOLOv5&#xff0c;展示了不同模型间…

C语言入门学习 --- 6.指针

文章目录 第六章指针1.指针是什么&#xff1f;这里我们总结一下&#xff1a;问题&#xff1a;省流版&#xff1a; 2.指针和指针类型2.1指针-整数2.2指针的解引用 3.野指针3.1野指针成因3.2如何规避野指针 4.指针运算4.1指针-整数4.2指针-指针4.3指针的关系运算标准规定&#xf…

剑指offer面试题34 丑数

考察点 空间换时间提效知识点 题目 分析 这里面其实用到了一点点的数学知识&#xff0c;丑数的定义是只包含2&#xff0c;3&#xff0c;5因子的数。现在要求第1500个丑数&#xff0c;最简单的办法就是从数字1开始遍历&#xff0c;依次判断每个数字是不是丑数&#xff0c;如果…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的木材表面缺陷检测系统(深度学习+Python代码+UI界面+训练数据集)

摘要&#xff1a;开发高效的木材表面缺陷检测系统对于提升木材加工行业的质量控制和生产效率至关重要。本篇博客详细介绍了如何运用深度学习技术构建一个木材表面缺陷检测系统&#xff0c;并提供了完整的实现代码。该系统采用了强大的YOLOv8算法&#xff0c;并对YOLOv7、YOLOv6…

升级Windows 11 专业版升级密钥永久使用

Windows 11 专业版是 Windows 11 的商业版本&#xff0c;专为中小型企业和组织设计。它提供了一些家庭版和专业版所没有的功能&#xff0c;例如&#xff1a; 安全性: 设备加密&#xff1a;使用 BitLocker 或 BitLocker 设备加密保护您的设备和数据。身份验证&#xff1a;使用…

VUE_nuxt启动只能通过localhost访问,ip访问不到:问题解决

修改项目根目录下的 package.json "config": {"nuxt": {"host": "0.0.0.0","port": "3000"} } 这样项目启动后就可以通过ip进行访问了

保研复习数据结构记(7)--散列查找(哈希表)

哈希表有什么特点&#xff1f;数据元素的关键字与其存储地址直接相关&#xff08;通过哈希函数相关&#xff09;&#xff0c;典型的用空间换时间的算法处理冲突的方法&#xff1f;拉链法&#xff08;链地址法&#xff09;&#xff0c;开放定址法&#xff0c;再散列法什么是查找…

mac idea快捷键记录

1.查看接口有多少的实现类&#xff0c;选中下面的这个类&#xff0c;然后commandoptionB 即可。

【JavaEE Spring 项目】消息队列的设计

消息队列的设计 一、消息队列的背景知识二、需求分析核心概念⼀个⽣产者, ⼀个消费者N 个⽣产者, N 个消费者Broker Server 中的相关概念核⼼ API交换机类型 (Exchange Type)持久化⽹络通信消息应答 三、 模块划分四、 项⽬创建五、创建核心类创建 Exchange创建 MSGQUeue创建 B…

【位运算】【脑筋急转弯】2749. 得到整数零需要执行的最少操作数

作者推荐 视频算法专题 本文涉及知识点 2749. 得到整数零需要执行的最少操作数 给你两个整数&#xff1a;num1 和 num2 。 在一步操作中&#xff0c;你需要从范围 [0, 60] 中选出一个整数 i &#xff0c;并从 num1 减去 2i num2 。 请你计算&#xff0c;要想使 num1 等于 …

对GIS与游戏引擎(UE4 或 U3D)结合的看法

GIS与游戏引擎结合&#xff0c;这在6年前就已经很多公司在进行探索了&#xff0c;经过这几年的发展&#xff0c;结合当前的政策&#xff0c;从以下几方面说一下我的看法&#xff1a; 1.GIS客户都是特殊单位及领域。2018年后&#xff0c;国内已经对国产化有明确要求了&#xff0…

Docker进阶:深入了解容器数据卷

Docker进阶&#xff1a;深入了解容器数据卷 一、前言二、容器数据卷的作用三、容器数据卷的使用方法四、实战--使用docker部署前端项目&#xff08;数据卷挂载&#xff09;4.1 重要&#xff1a;准备工作&#xff0c;先在本地创建挂载目录4.2 启动一个临时的nginx容器&#xff0…

LLM(大语言模型)常用评测指标之F1-Score

F1-Score F1-Score 是一种常用于评估分类模型性能的指标&#xff0c;特别是在数据不平衡的情况下。它是精确度 (Precision) 和召回率 (Recall) 的调和平均值&#xff0c;用于衡量模型对正类的预测能力。 计算方法 精确度 (Precision)&#xff1a;是指正确预测为正类的数量与所…

pytorch(九)卷积神经网络

文章目录 卷积神经网络全连接神经网络与卷积神经网络的区别概念性知识mnist数据集(卷积神经网络) GoogLeNetInception 残差网络ResNet残差块结构 稠密连接网络网络结构 卷积神经网络 全连接神经网络与卷积神经网络的区别 全连接神经网络是一种最为基础的前馈神经网络&#xf…

ChatGPT Prompt 的原理总结

ChatGPT Prompt 的原理总结 ChatGPT Prompt 是 OpenAI 开发的大型语言模型 ChatGPT 的一种使用方式。通过 Prompt&#xff0c;用户可以引导 ChatGPT 生成特定内容&#xff0c;例如回答问题、写故事、写代码等等。 Prompt 的原理 Prompt 本质上是一段文本&#xff0c;它告诉 C…

wrk安装及使用

一, mac安装 官网地址: https://github.com/wg/wrk/blob/master/README.md mac 安装: brew install wrk 查看是否安装成功: wrk -v centos安装: sudo yum groupinstall Development Tools sudo yum install -y openssl-devel git git clone GitHub - wg/wrk: Modern HTTP …

处理json异常问题,由于发送kafka消息是一个字符串,等到消费时json字符串会有多个““引号,故需要先处理json再转对象

发送一个正确的json对象 发送kafka消息也是一个json传&#xff0c;也没问题 等到消费kafka时&#xff0c;也能接收到一个json字符串但是会多一个 " 引号&#xff0c; 就会导致json转对象失败所以需要先去除 开通和结尾的 " 引号 去除后的json 就是一个正常的json&…

河北专升本(C语言编程题)

一&#xff1a;基础算法原理 1. 冒泡排序 原理&#xff1a;从左到右&#xff0c;相邻元素进行比较。每次比较一轮&#xff0c;就会找到序列中最大的一个或最小的一个。这个数就会从序列的最右边冒出来。 以从小到大排序为例&#xff0c;第一轮比较后&#xff0c;所有数中最大的…