微信小程序(三十一)本地同步存储API

注释很详细,直接上代码

上一篇

新增内容:
1.存储数据
2.读取数据
3.删除数据
4.清空数据

源码:

index.wxml

<!-- 列表渲染基础写法,不明白的看上一篇 -->
<view class="students"><view class="item"><text>下标</text><text>序号</text><text>姓名</text><text>年龄</text><text>性别</text></view><view wx:for="{{students}}" wx:key="id" wx:for-item="stu" wx:for-index="idx" class="item"><text>{{idx}}</text><text>{{stu.id}}</text><text>{{stu.name}}</text><text>{{stu.age}}</text><text>{{stu.gender}}</text></view>
</view><button type="primary" bind:tap="getMsgs" style="margin-top: 40rpx;">获取信息</button><view style="margin-top: 20rpx; margin-left: 20rpx;"><button type="default" size="mini" bind:tap="saveData">保存数据</button><button type="default" size="mini" bind:tap="getData">获取数据</button><button type="default" size="mini" bind:tap="delData">删除数据</button><button type="default" size="mini" bind:tap="clearData">清空数据</button>
</view>

index.wxss

.item{display: flex;/* 水平均分 */justify-content:space-evenly;height: 60rpx;
}

index.js

Page({data:{//存储学生信息的数组students:[]},clearData(){wx.clearStorageSync()},getData(){const list=wx.getStorageSync('students')console.log(list)},delData(){wx.removeStorageSync('students')},saveData(){//这里注意格式是前面是存储的内容的名字,后面是需存储的数据的名字wx.setStorageSync('students', this.data.students)wx.showToast({icon:none,title: '存储成功'})},getMsgs(){//显示加载框wx.showLoading({title: 'title',mask: true,//加上透明蒙版遮挡,防止在加载时用户继续点击触发事件 success: (res) => {},fail: (res) => {},complete: (res) => {},})wx.request({//自个在服务器写个php就行了url: 'http://wdhlp.szc007.love/SZCAPI/goods.php',data:{key:'123456'},success:(res) => {//成功的情况this.setData({//基础赋值,不明白的看上上上上……一篇students:res.data.msg//看清楚是冒号是冒号不是等号})//showToast和showLoading其实是同一个控件接口//如果成功则直接显示对话框,这样会自动覆盖之前的加载框wx.showToast({icon:'none',//如果图标不是必要的加上这句,否则会限制显示字数title: '加载成功'})},fail:(res)=>{//如果失败的话则不会覆盖,需要特判关闭一下wx.hideLoading({noConflict: true,success: (res) => {},fail: (res) => {},complete: (res) => {},})}})}
})

效果演示:

在这里插入图片描述

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

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

相关文章

使用 git 将本地文件上传到 gitee 远程仓库中,推送失败

项目场景&#xff1a; 背景&#xff1a; 使用 git 想要push 本地文件 到 另一个远程仓库&#xff0c;执行 git push origin master后此时报错 问题描述 问题&#xff1a; git push 本地文件 到 另一个远程仓库时&#xff0c;运行 git push origin master ,push文件失败&…

老版本labelme如何不保存imagedata

我的版本是3.16&#xff0c;默认英文且不带取消保存imagedata的选项。 最简单粗暴的方法就是在json文件保存时把传递过来的imagedata数据设定为None&#xff0c;方法如下&#xff1a; 找到labelme的源文件&#xff0c;例如&#xff1a;D:\conda\envs\deeplab\Lib\site-packages…

vue 适配大屏 页面 整体缩放

正常应该放在app.vue 里面。我这里因为用到element-ui 弹框无法缩放&#xff0c;所以加在body上面 (function (doc, win) {var docEl doc.documentElement,resizeEvt orientationchange in window ? orientationchange : resize,recalc function () {var clientWidth docE…

基于协同过滤的个性化电影推荐系统分析设计python+flask

本系统为用户而设计制作个性化电影推荐管理&#xff0c;旨在实现个性化电影推荐智能化、现代化管理。本个性化电影推荐自动化系统的开发和研制的最终目的是将个性化电影推荐的运作模式从手工记录数据转变为网络信息查询管理&#xff0c;从而为现代管理人员的使用提供更多的便利…

PPT录屏功能在哪?一键快速找到它!

在现代办公环境中&#xff0c;ppt的录屏功能日益受到关注&#xff0c;它不仅能帮助我们记录演示文稿的播放过程&#xff0c;还能将操作过程、游戏等内容完美录制下来。可是很多人不知道ppt录屏功能在哪&#xff0c;本文将为您介绍ppt录屏的打开方法&#xff0c;以帮助读者更好地…

如何计算两个指定日期相差几年几月几日

一、题目要求 假定给出两个日期&#xff0c;让你计算两个日期之间相差多少年&#xff0c;多少月&#xff0c;多少天&#xff0c;应该如何操作呢&#xff1f; 本文提供网页、ChatGPT法、VBA法和Python法等四种不同的解法。 二、解决办法 1. 网页计算法 这种方法是利用网站给…

时间回显+选择(年月日时分秒

一、获取某个时间 1、Date获取Date类型 <el-form-item label"时间" name"endTime"><el-date-picker type"datetime" v-model"editForm.endTime"></el-date-picker> </el-form-item> 效果如图&#xff1a; …

Java学习笔记2024/1/29

1. 流程控制语句 笔记地点 1.1 流程控制语句基础概念 package com.angus.processControlStatement.processControlStatement;public class processControlStatementNote {public static void main(String[] args) {// 本章知识点: 流程控制语句// 流程控制语句: 通过一些语句…

基于SpringBoot Vue超市管理系统

大家好✌&#xff01;我是Dwzun。很高兴你能来阅读我&#xff0c;我会陆续更新Java后端、前端、数据库、项目案例等相关知识点总结&#xff0c;还为大家分享优质的实战项目&#xff0c;本人在Java项目开发领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#x…

Java 数据结构 二叉树(一)二叉查询树

目录 树的种类 二叉树 二叉查找树 满二叉树 ​编辑 完全二叉树 二叉树的数据存储 链式存储 数组存储 寻址方式&#xff1a; 二叉树的遍历&#xff08;了解即可&#xff09; ​编辑 二叉查询树缺点 前言-与正文无关 生活远不止眼前的苦劳与奔波&#xff0c;它还充满…

人大金仓将在未来产业创新发展中扮演更加重要的角色

1月29日&#xff0c;工信部等七部门联合发布《关于推动未来产业创新发展的实施意见》&#xff0c;指出面向未来制造、未来信息、未来材料、未来能源、未来空间、未来健康等六大重点方向&#xff0c;将发挥新型举国体制优势&#xff0c;引导地方结合产业基础和资源禀赋&#xff…

专业139总分400+南昌大学811信号与系统考研经验电子信息与通信工程集成电路

今年专业课811信号与系统139分&#xff0c;总分400&#xff0c;顺利上岸南昌大学&#xff0c;回首这一年的复习&#xff0c;有很多经验想和大家分享&#xff0c;希望对大家复习会有一些帮助。专业课&#xff1a;139分&#xff0c;811信号与系统 主要参考书&#xff1a;《信号与…

python pygame实现倒计时

实现思路 获取开始时间、当前时间&#xff0c;通过当前时间-开始时间时间差&#xff0c;再通过倒计时的总时长-时间差即可实现&#xff01; 随着时间的流逝&#xff0c;当前时间会变大&#xff0c;也就导致时间差会变大&#xff0c;当使用总时长-时间差的时候&#xff0c;得到…

算法41:掉落的方块(力扣699题)----线段树

题目&#xff1a;https://leetcode.cn/problems/falling-squares/description/ 在二维平面上的 x 轴上&#xff0c;放置着一些方块。 给你一个二维整数数组 positions &#xff0c;其中 positions[i] [lefti, sideLengthi] 表示&#xff1a;第 i 个方块边长为 sideLengthi &…

027 方法的定义及调用

方法的定义 方法调用 设计方法的原则 使用场景 想象一下有个场景需要我们不断频繁地去使用某部分特定的代码&#xff0c;我们自然可以通过复制粘贴去完成&#xff0c;但是这样会导致代码又臭又长&#xff0c;大部分是重复的代码&#xff0c;这不利于我们后续的维护&#xff0c;…

2分钟搭建FastGPT训练企业知识库AI助理(Docker部署)

我们使用宝塔面板来进行搭建,更方便快捷灵活,争取操作时间只需两分钟 宝塔面板下安装Docker 在【软件商店中】安装【docker管理器】【docker模块】即可 通过Docker安装FastGPT 通过【Docker】【添加容器】【容器编排】创建里新增docker-compose.yaml 以下是模板内容 仅需…

【C++入门到精通】C++的IO流(输入输出流) [ C++入门 ]

阅读导航 引言一、C语言的输入与输出二、流是什么三、CIO流1. C标准IO流&#xff08;1&#xff09;istream&#xff08;2&#xff09;ostream&#xff08;3&#xff09;iostream&#xff08;4&#xff09;cin 和 cout 2. C文件IO流&#xff08;1&#xff09;ifstream&#xff0…

028 方法的重载

方法重载的定义 使用案例 public static void main(String[] args) {// 匹配到max(int a, int b)System.out.println(max(1, 3));// 匹配到max(double a, double b)System.out.println(max(1L, 3L));// 匹配到max(double a, double b, double c, double d)&#xff0c;int自动…

服了,一个ThreadLocal被问出了花

分享是最有效的学习方式。 博客&#xff1a;https://blog.ktdaddy.com/ 故事 地铁上&#xff0c;小帅无力地倚靠着杆子&#xff0c;脑子里尽是刚才面试官的夺命连环问&#xff0c;“用过TheadLocal么&#xff1f;ThreadLocal是如何解决共享变量访问的安全性的呢&#xff1f;你…

手机gif动图怎么操作?这个方法分分钟解决

手机上怎么制作gif动画&#xff1f;Gif动图是当下非常流行的一种表达方式&#xff0c;通过简单的画面循环就能够传达您的想法。但是&#xff0c;想要在手机上制作gif动画的时候应该怎么办呢&#xff1f;通过会用GIF动图在线编辑&#xff08;https://www.gif.cn/&#xff09;工具…