微信小程序开发数据缓存基础知识辨析及运用实例详解


Posted in Javascript onNovember 06, 2020

提示:这里可以添加本文要记录的大概内容:
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。

提示:以下是本篇文章正文内容,下面案例可供参考

一、微信数据缓存是什么?

在实际开发中,在用到一个数据时,我们需要调用api接口去得到,然后渲染在页面中,但是对于一些数据,是经常需要使用的,如果每次使用时都需要调用api接口,会十分麻烦。数据缓存就解决了这个问题,我们可以在初次调用某api得到数据的同时将数据缓存,那么在之后的使用过程中,可以直接通过缓存区得到,这样就提高了程序的效率。举个例子。在第二次登录微信时,我们还没有进行登录操作,但是发现我们的头像数据已经渲染到页面中,这就是因为再一次登录时,图片的地址是从缓存区中得到的缘故,在本文中也会对此实例进行操作,微信小程序中的数据缓存可类比js中的localstorage

二、数据缓存api使用方法和辨析

1.存入数据

wx.setStorageSync(string key, any data)

wx.setStorageSync("name","张三")

wx.setStorage(Object object)

wx.setStorage({
 data: "李四",
 key: 'name1',
 })

当执行了这段代码之后就会发现在调试区storage中出现以下数据

微信小程序开发数据缓存基础知识辨析及运用实例详解

2.读数据

wx.getStorageSync(string key)

var b=wx.getStorageSync('name')
 console.log(b);

Object wx.getStorageInfoSync()

var a=wx.getStorage({
 key: 'name1',
 })
 a.then(e=>{
 console.log(e.data);
 
 })

wx.getStorageInfoSync()得到的是一个promise对象,因此使用then方法通过e.data得到缓存区数据
当执行了这段代码之后就会发现在调试区console中出现以下数据

微信小程序开发数据缓存基础知识辨析及运用实例详解

3.删除数据 wx.removeStorage(Object object)

wx.removeStorage({
 key: 'name1',
 })

wx.removeStorageSync(‘name')

wx.removeStorageSync('name')

当执行了这段代码之后就会发现在调试区storage中出现以下数据会被删除


4.删除全部数据(这里不再细说)

wx.clearStorage()
wx.clearStorageSync()

三、api辨析

可以看到上面的多可api可分为两大类,一种是带sync的一种是不带的,其实带sync的是异步api,而不带的是同步api,这也是带sync的这部分api得到的是一个promise对象,这里以wx.setStorageSync() ,wx.setStorage() 做以示例

1.wx.setStorage()

代码如下(示例):在wxml中写入了两个按钮,点击第一个触发函数tongbu,用来演示同步情况

tongbu:function(){
 wx.setStorageSync("name","张五") //同步api
 var a=wx.getStorageSync('name')
 console.log(a);
}

最开始name对应的数据是张三,在这里我们修改为张五,然后读取数据,发现console为

微信小程序开发数据缓存基础知识辨析及运用实例详解

说明是单线程顺序执行,在修改了name后才执行了console.log

2.wx.setStorage()

代码如下(示例):点击第一个触发函数yibu,用来演示异步情况

yibu:function(){
 wx.setStorage({
 data: "李柳",
 key: 'name1',
 })
 var a=wx.getStorageSync('name1')
 console.log(a);

}
})

最开始name对应的数据是李四,在这里我们修改为李柳,然后读取数据,发现console为

微信小程序开发数据缓存基础知识辨析及运用实例详解

代码console.log在修改数据之后,但是发现在修改数据过后,a没有改变,说明这里的wx.setStorage()是异步api,在执行时,无论这里有无完成执行,都会执行cinsole.log


加载微信个人信息案例

index.wxss

/**index.wxss**/
.userinfo {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.userinfo-avatar {
 width: 128rpx;
 height: 128rpx;
 margin: 20rpx;
 border-radius: 50%;
}

.userinfo-nickname {
 color: #aaa;
}

.usermotto {
 margin-top: 200px;
}

image{
 margin-top: 20px;
 margin-bottom: 20px;
 width: 50px;
 height: 50px;
}

index.wxml

<!--index.wxml-->
<view class="container">
 <button bindtap="getmessage">获取用户信息</button>
<view>头像</view>
<view><image src="{{pictureurl}}"></image></view>
<view><text>用户名为 {{name}}</text></view>
</view>

index.js

// pages/index/index.js
Page({

 /**
 * 页面的初始数据
 */
 data: {
  name:'张三',
  pictureurl:'../index/4.png'
 },
 getmessage:function(){
 var a=new Promise((resolve,reject)=>{
 wx.getUserInfo({
  success: function(res) {
  resolve(res)
  }
 })
 })//获取用户数据,前提是已经取得了访问权限
 a.then(res=>{
 this.setData({
  name:res.userInfo.nickName,
  pictureurl:res.userInfo.avatarUrl
 })//将访问得到的数据渲染到页面中
 wx.setStorage({
  data: res.userInfo.nickName,//name中存入用户名信息
  key: 'name',
 })
 wx.setStorage({
  data: res.userInfo.avatarUrl,//pictureurl中存入用户头像的url地址
  key: 'pictureurl',
 })
 })//同时将渲染的数据缓存
 },
 /**
 * 生命周期函数--监听页面加载,加载页面,触发onLoad。此时就可以将数据渲染
 */
 onLoad: function (options) {
 var name=wx.getStorageSync('name')//从缓存中读取用户名信息
 var url=wx.getStorageSync('pictureurl')//从缓存中读取头像url
 console.log(name);
 console.log(url);
 this.setData({
  name:name,
  pictureurl:url
 })
 
 }
})

渲染后的结果示例,第一次点击获取用户数据按钮后当刷新或者关闭后重启程序都会是此页面

微信小程序开发数据缓存基础知识辨析及运用实例详解

到此这篇关于微信小程序开发数据缓存基础知识辨析及运用实例详解的文章就介绍到这了,更多相关微信小程序开发数据缓存内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用javascript实现分割提取页面所需内容
May 09 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
自定义PC微信扫码登录样式写法
Dec 12 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
JS实现导航栏楼层特效
Jan 01 Javascript
JavaScript 数组去重详解
Sep 15 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 #Javascript
Nuxt的路由动画效果案例
Nov 06 #Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 #Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 #Javascript
微信小程序调用后台service教程详解
Nov 06 #Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 #Javascript
在nuxt中使用路由重定向的实例
Nov 06 #Javascript
You might like
抓取YAHOO股票报价的类
2009/05/15 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
php批量上传的实现代码
2013/06/09 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
js中小数转换整数的方法
2014/01/26 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
Python切片索引用法示例
2018/05/15 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
外贸业务员求职自荐信分享
2013/09/21 职场文书
作风建设年活动总结
2014/08/27 职场文书
个人汇报材料范文
2014/12/30 职场文书
工作收入证明范本
2015/06/12 职场文书
活动简报范文
2015/07/22 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
青年教师听课心得体会
2016/01/15 职场文书
教师培训学习心得体会
2016/01/21 职场文书