微信小程序实现写入读取缓存详解

2024-10-24 12:18:16

在小程序中有些需要把数据缓存到Storage中，需要的时候在读取缓存中的数据，在微信小程序中通过setStorage写入数据：

wx.setStorage({
   key: 'myData',
   data: res.data.data
})

通过getStorage读取缓存中的数据：

var that = this;
  wx.getStorage({
   key: 'myData',
   success: function (res) {
    var myData = res.data;//读取key值为myData的缓存数据
    that.setData({//拿到缓存中的数据并渲染到页面
     userName: myData.user.truename,
     schoolName: myData.school.name,
     className: myData.user.className,
   }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序缓存（本地缓存、异步缓存、同步缓存）详解

微信小程序缓存关于本地缓存 1.wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync) 可以对本地缓存进行设置.获取和清理.本地缓存最大为10MB 2.localStorage 是永久存储一.异步缓存 wx.setStorage(OBJECT) 将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容 wx.setStor
微信小程序之数据缓存的实例详解

微信小程序之数据缓存的实例详解前言: 在H5之前,缓存一般都是用cookie,但是cookie的存储空间太小.于是,H5增加了新的缓存机制,即localstorage 和 sessionstorage,具体的介绍就不在多说.在微信小程序中,数据缓存其实就和localstorage 的原理差不多,所以理解起来并不难.下面我们来一起实现一下. 效果图展示: 我们在index页面存入数字11,然后在跳转到新页面,在将缓存中的11取出渲染到当前页面.具体代码如下: index页面: <span sty
微信小程序缓存过期时间的使用详情

关于本地缓存 1.wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置.获取和清理.本地缓存最大为10MB 2.localStorage 是永久存储相应的api---------- wx.setStorage(OBJECT) wx.getStorage(OBJECT) wx.getStorageInfo(OBJECT) w
微信小程序-详解数据缓存

每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置.获取和清理.本地缓存最大为10MB. 注意: localStorage 是永久存储的,但是我们不建议将关键信息全部存在 localStorage,以防用户换设备的情况. wx.setStorage(OBJECT) 将数据存储
小程序清理本地缓存的方法

1.wx.clearStorage接口函数,这个函数不需要参数,可以清理本地的所有缓存. 清除前: 清除后: 2.wx.clearStorageSync接口函数,这个函数用于同步清理本地数据缓存,该接口同样也没有参数. 清除前: 清除后: 3.wx.removeStorage接口函数:这个接口函数用于从本地缓存中异步删除指定key对应内容清除前: 清除后: 4.wx.removeStorageSync接口函数:这个函数用于从本地缓存中同步删除指定key对应的内容清除前: 清除后: 以上就是本
微信小程序基于本地缓存实现点赞功能的方法

本文实例讲述了微信小程序基于本地缓存实现点赞功能的方法.分享给大家供大家参考,具体如下: wxml中的写法注意: 1. 使用wx:if="{{condition}}" wx:else实现图标的切换效果: 2. 为图片绑定点击事件bindtap="toCollect",两个image标签都要绑定! <image wx:if="{{collection}}" src="/images/icon/pic1.png" bind
微信小程序实现写入读取缓存详解

在小程序中有些需要把数据缓存到Storage中,需要的时候在读取缓存中的数据,在微信小程序中通过setStorage写入数据: wx.setStorage({ key: 'myData', data: res.data.data }) 通过getStorage读取缓存中的数据: var that = this; wx.getStorage({ key: 'myData', success: function (res) { var myData = res.data;//读取key值为myDat
微信小程序本地数据存储实例详解

微信小程序本地数据存储实例详解前言如果您在看此文章之前有过其他程序的开发经验,那一定会知道一般例如安卓或者苹果的原生APP都提供了本地的存储功能,甚至可以使用sqlite数据库来做存储.可是微信的小程序框架基于微信本身,其实际运行环境只是在浏览器里面,所以不会提供那么丰富的数据存储实力.但html5开始已经可以在浏览器里面存储数据,好在微信的小程序给这个功能封装好了,这样我们可以使用数据存储. 每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStor
微信小程序url与token设置详解

微信小程序url与token设置详解新浪云应用sae的代码里创建一个weixin.php文件,写入以下代码 define("TOKEN","myToken");// 后台填写的token,在微信公众平台启用 $wechatObj = new wechatAPI(); $wechatObj->isValid(); class wechatAPI { public function isValid()//验证微信接口,验证函数以外的代码和微信公众号开发token
微信小程序合法域名校验出错详解及解决办法

微信小程序合法域名校验出错详解及解决办法看下出现错误: 微信小程序开发,遇到这个问题怎么办? 产生原因是因为发起了wx.request请求而请求的域名没有在微信公众平台后台设置. 1.开发者自己手动设置不检验不管你有没有拿到App ID ,我相信很多人都会和我一样做一件事,就是二话不说先大概了解下文档,然后直接上github找项目,导入试试.我是这么做的,结果上来就报这个错,后来发现其实可以自己设置本地开发工具不校验域名,完全没有影响. 在"项目">最后一个选项,勾选之后
微信小程序动态传参实例详解

微信小程序动态传参实例详解在微信小程序的开发过程中经常会用到动态传参,比如根据某一页面传参的不同,加载不同的新的页面.接下来介绍下如何实现. 上一篇博客中介绍了如何用wx:for循环显示数组,一般情况下我们要实现的功能是点击不同的元素进入不同的页面,比如在另一个页面加载某个元素的详细信息. 跳转这里采用navigator跳转,在navigator跳转的链接上将参数加上去: index.wxml(根据点击页面的不同传递参数) <view class="item" wx:for=
微信小程序检查接口状态实例详解

微信小程序检查接口状态实例详解实例代码: // 检查接口是否可用 wx.getSetting({ success(res) { if (!res['scope.record']) { // 接口调用询问 wx.authorize({ scope: 'scope.userInfo', success(res) { wx.startRecord() // 用户已经同意小程序使用录音功能,后续调用 wx.startRecord 接口不会弹窗询问 }, fail() { }, complete()
微信小程序滚动选择器(时间日期)详解及实例代码

微信小程序滚动选择器(时间日期)详解微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器. 看下相应的属性: 具体的来看看代码,布局: <view class="section" > <
微信小程序 POST请求的实例详解

微信小程序 POST请求的实例详解在微信小程序里post请求和get情求,写法差不多,但是还是有一点点不同的,下面利用post请求做一个查询天气的微信小程序demo. 页面代码: <view> {{title}} </view> <span style="font-size:24px;"> <view class="container"> <view style=
微信小程序网络请求wx.request详解及实例

微信小程序网络请求wx.request详解及实例如果说小程序API里面最重要一个接口是哪一个?那么首推wx.request().相当于在小程序内请发起一个https请求(本地调试模式下支持HTTP).HTTP协议中共定义了八种方法或者叫"动作"来表明对Request-URI指定的资源的不同操作方式. GET:向特定的资源发出请求. POST:向指定资源提交数据进行处理请求.数据被包含在请求体中. PUT:向指定资源位置上传其最新内容. DELETE:请求服务器删除Request-UR
微信小程序同步请求授权的详解

微信小程序同步请求授权的详解需求分析: 1.在小程序首次打开的时候,我需要同时请求获取多个权限,由用户逐一授权. (['scope.userInfo','scope.userLocation','scope.address','scope.record','scope.writePhotosAlbum']) 问题分析: 1. wx.authorize接口同时调用,请求多个权限,由于异步原因,将授权请求一并发出,显然不符合要求. 2. promise能很好的解决问题,试着尝试了一下,下面代码分

微信小程序实现写入读取缓存详解

相关推荐

随机推荐