微信小程序开发系列(三十)·小程序本地存储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博客

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

YOLOv8改进 | 图像去雾 | 利用图像去雾网络AOD-PONO-Net网络增改进图像物体检测

一、本文介绍 本文给大家带来的改进机制是利用AODNet图像去雾网络结合PONO机制实现二次增强&#xff0c;我将该网络结合YOLOv8针对图像进行去雾检测&#xff08;也适用于一些模糊场景&#xff0c;图片不清晰的检测&#xff09;&#xff0c;同时本文的内容不影响其它的模块改进…

网康科技 NS-ASG 应用安全网关 SQL注入漏洞复现(CVE-2024-2330)

0x01 产品简介 网康科技的NS-ASG应用安全网关是一款软硬件一体化的产品,集成了SSL和IPSec,旨在保障业务访问的安全性,适配所有移动终端,提供多种链路均衡和选择技术,支持多种认证方式灵活组合,以及内置短信认证、LDAP令牌、USB KEY等多达13种认证方式。 0x02 漏洞概述 …

Redis底层数据结构之String

文章目录 1. 前提回顾2. RedisObject三大数据类型简介3. SDS字符串4. SDS字符串源码分析5. 总结 1. 前提回顾 前面我们说到redis的String数据结构在底层有多种编码方式。例如我们执行下面两条语句 set k1 v1 set age 17我们查看类型&#xff0c;发现这类型都是String类型 我们…

【力扣精选算法100道】——二进制求和

LCR 002. 二进制求和 - 力扣&#xff08;LeetCode&#xff09; 目录 &#x1f388;了解题意 &#x1f388;算法分析 &#x1f6a9;cur1>0 &#x1f6a9;cur2>0 &#x1f6a9;t &#x1f388;实现代码 &#x1f388;了解题意 遵循二进制加法法则&#xff0c;如果俩…

工具篇--分布式定时任务springBoot 整合 elasticjob使用(3)

文章目录 前言一、Springboot 整合&#xff1a;1.1 引入jar&#xff1a;1.2 配置zookeeper 注册中心&#xff1a;1.3 定义job 业务类&#xff1a;1.4 job 注册到zookeeper&#xff1a;1.5 项目启动&#xff1a;1.5.1 zookeeper 注册中心实例&#xff1a;1.5.2 任务执行日志输出…

【数据挖掘】练习1:R入门

课后作业1&#xff1a;R入门 一&#xff1a;习题内容 1.要与R交互必须安装Rstudio&#xff0c;这种说法对不对&#xff1f; 不对。虽然RStudio是一个流行的R交互集成开发环境&#xff0c;但并不是与R交互的唯一方式。 与R交互可以采用以下几种方法&#xff1a; 使用R Conso…

AHU 汇编 实验六

一、实验名称&#xff1a;实验6 输入一个16进制数&#xff0c;把它转换为10进制数输出 实验目的&#xff1a; 培养汇编中设计子程序的能力 实验过程&#xff1a; 源代码&#xff1a; data segmentbuff1 db Please input a number(H):$buff2 db 30,?,30 dup(?),13,10buff3 …

社交革命的引领者:探索Facebook如何改变我们的生活方式

1.数字社交的兴起 随着互联网的普及&#xff0c;社交媒体成为我们日常生活的重要组成部分。Facebook作为其中的先驱&#xff0c;从最初的社交网络演变成了一个拥有数十亿用户的全球化平台。它不仅改变了我们与世界互动的方式&#xff0c;还深刻影响了我们的社交习惯、人际关系以…

数据结构:树和二叉树

树的概念 1.树是一种非线性的数据结构。它是由n个有限节点的集合。 2.树分为根节点和子树。根节点没有前驱节点。 3.树的子树是由一个个子树组成&#xff0c;它们可以看作一个个集合。每个集合下面又有集合。 因此&#xff0c;树是递归定义的。 树形结构中&#xff0c;子树…

搜索引擎SEO策略介绍

baidu搜索&#xff1a;如何联系八爪鱼SEO baidu搜索&#xff1a;如何联系八爪鱼SEO baidu搜索&#xff1a;如何联系八爪鱼SEO 第一、 关键词的选择策略&#xff1a; 1、门户类的网站关键词选择策略&#xff1a; 网站每个页面本身基本都包含有关键词&#xff1a;网站拥有上百…

嵌入式数据库SQlite3-进阶篇

嵌入式数据库sqlite3 - HQ 文章目录 嵌入式数据库sqlite3 - HQ[toc] 嵌入式数据库sqlite3【进阶篇】数据库准备order子句Where 子句与逻辑运算符语法实例 group by子句having子句举例 函数SQLite COUNT 函数SQLite MAX 函数SQLite MIN 函数SQLite AVG 函数SQLite SUM 函数SQLit…

Qt 使用RAW INPUT获取HID触摸屏,笔设备,鼠标的原始数据,最低受支持的客户端:Windows XP [仅限桌面应用]

在开发绘图应用程序时&#xff0c;经常会需要读取笔设备的数据&#xff0c;通过对笔数据的解析&#xff0c;来判断笔的坐标&#xff0c;粗细。如果仅仅只是读取鼠标的坐标&#xff0c;就需要人为在应用程序端去修改笔的粗细&#xff0c;并且使用体验不好&#xff0c;如果可以实…

【C++】STL(五) Stack Queue容器

5、 stack容器 5.1 简介 ① stack是一种先进后出的容器&#xff0c;它只有一个出口。 ② 栈中只有顶端的元素才可以被外界使用&#xff0c;因此栈不允许有遍历行为。 ③ 栈中进入数据称为&#xff1a;入栈 push ④ 栈中弹出数据称为&#xff1a;出栈 pop 5.2 常用接口 …

Fair Data Exchange:区块链实现的原子式公平数据交换

1. 引言 2024年斯坦福大学和a16z crypto research团队 论文 Atomic and Fair Data Exchange via Blockchain 中&#xff0c;概述了一种构建&#xff08;包含过期EIP-4844 blobs的&#xff09;fair data-markets的协议。该论文源自a16z crypto的暑期实习计划&#xff0c;与四名…

R语言tidycmprsk包分析竞争风险模型

竞争风险模型就是指在临床事件中出现和它竞争的结局事件&#xff0c;这是事件会导致原有结局的改变&#xff0c;因此叫做竞争风险模型。比如我们想观察患者肿瘤的复发情况&#xff0c;但是患者在观察期突然车祸死亡&#xff0c;或者因其他疾病死亡&#xff0c;这样我们就观察不…

KAFKA入门教程

目录 1.安装kafka 2.安装kafkamanager可视化工具 3.springboot整合kafka 1.pom导包 2.启动类和yml配置 3.代码演示 编写生产者&#xff1a; 消费者&#xff1a; 1.安装kafka 进入kafka官网下载对应版本kafka kafka官网地址&#xff1a;Apache Kafka kafka是使用Scal…

Kotlin 数据解析(Gson)

一、添加依赖 build.gradle.kts(:app) // gson数据解析implementation("com.google.code.gson:gson:2.8.6") 对象类&#xff1a; // 对象类 class Account {var uid:String "00001"var userName:String "Freeman"var password:String &quo…

Midjourney能让角色保持一致了

Midjourney发布新功能&#xff0c;网友直呼“不可思议”&#xff01; 现在你可以让生成的图像几乎保持角色一致&#xff0c;belike&#xff1a; 所有超级英雄长一个模样盯着你。 甚至动漫风、写实风等跨风格生成也同样适用&#xff1a; 保持同一风格&#xff0c;感jio配上文字…

【python】自动化工具Selenium与playwright去除webdriver检测

对这个世界如果你有太多的抱怨 跌倒了就不敢继续往前走 为什么人要这么的脆弱 堕落 请你打开电视看看 多少人为生命在努力勇敢的走下去 我们是不是该知足 珍惜一切 就算没有拥有 &#x1f3b5; 周杰伦《稻香》 # -*- coding:utf-8 -*- import timefrom s…

【C语言】如何规避野指针

✨✨ 欢迎大家来到莉莉的博文✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 目录 一、概念&#xff1a; 二、野指针成因&#xff1a; 2.1. 指针未初始化 2.2 指针越界访问 3. 指针指向的空间释放 三、如何规避野指针 3.…