前端页面wxml

<button bindtap="setStorageVal3" data-num3="3" >将数值3存入缓存</button>
<button bindtap="delStorage">删除指定缓存</button>
<button bindtap="clearStorage">清除所有缓存</button>
<button bindtap="showStorageVal3">显示当前缓存</button>
<text wx:if="{{isShowText}}">{{showText}}</text>

js数据定义

data: {isShowText:false,value:0,showText:'',
},

*存储缓存

 //将数值3存入缓存setStorageVal3(e){// 开启加密存储wx.setStorage({key: "value",data: e.currentTarget.dataset.num3,encrypt: true, // 若开启加密存储，setStorage 和 getStorage 需要同时声明 encrypt 的值为 truesuccess() {wx.getStorage({key: "key",encrypt: true, // 若开启加密存储，setStorage 和 getStorage 需要同时声明 encrypt 的值为 truesuccess(res) {console.log(res.data)}})}})},

开发者查看缓存：

*获取缓存

注：在success回调函数中，this.setData中的this对象已经不是page了，所以在success之前应该把page对象赋值给新建的对象

showStorageVal3(){var that = this;//把page对象赋值给新建的对象wx.getStorage({key: "value",encrypt: true, // 若开启加密存储，setStorage 和 getStorage 需要同时声明 encrypt 的值为 truesuccess(res) {that.setData({isShowText:true,showText:res.data})},fail(res){// console.log(res);that.setData({isShowText:false,})}})
},

*移除缓存

removeStorage移除缓存指的是移除指定缓存，需要指定key值

//删除指定缓存
delStorage(){wx.removeStorage({key: 'value',success (res) {console.log(res.errMsg)}})
},

*清理缓存

clearStorage移除缓存指的是移除所有缓存，不需要指定key值（即使指定了也没用）（一键清楚所有烦恼）

//清除所有缓存
clearStorage(){var that = this;wx.clearStorage({success: (res) => {console.log(res);that.setData({isShowText:false,})},})
},

wxss

button{margin-top: 30rpx;border: black 1rpx solid;background: rgb(7,193,96);box-shadow: gray 8rpx 8rpx 2rpx 2rpx;
}
text{width: 80%;height: 200rpx;margin: 10%;text-align: center;line-height: 2em;background: lightblue;color: black;font-size:100rpx;}

缓存应用场景

本地数据缓存：就是将小程序的数据存储在当前设备硬盘上。
本地数据缓存的作用：

存储用户在小程序上产生的操作，在用户关闭小程序重新打开时可以恢复之前的状态。
缓存一些服务端非实时的数据，从而提高小程序获取数据的速度。

【微信小程序】缓存基础——存储、获取、移除、清理(异步)相关推荐

微信小程序缓存获取数据教程
微信小程序缓存获取数据教程每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSy ...
同时存多个变量缓存微信小程序_微信小程序缓存（本地缓存、异步缓存、同步缓存）详解...
微信小程序缓存关于本地缓存 1.wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage( ...
原生微信小程序项目基础框架搭建
原生微信小程序项目基础框架搭建文件目录结构 1. 环境变量(开发环境, 线上环境,测试环境)便于在不同环境的切换接口的url webview的前缀url 埋点相关的环境参数本地存储的环境变量配置 ...
微信小程序开发基础教程
文章目录 1.什么叫做微信小程序 2.微信小程序开发功能特点 3.微信小程序开发流程 3.1 微信公众平台注册 3.2 微信开发者工具下载 3.3 微信开发者工具界面上的基本功能介绍 3.3.1 开发 ...
微信小程序零基础入门（上）
目录第一章.前言 1.1 小程序与网页开发的区别 1.2 首次开发小程序的准备工作第二章.小程序基础结构了解 2.1 项目构成 2.1.1 项目的基本组成结构 2.1.2 小程序页面的组成部分 2 ...
本地缓存需要高时效性怎么办_详解微信小程序缓存--缓存时效性
关于本地缓存 1.wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearS ...
知乎爆赞！4504页《微信小程序零基础入门开发文档》+《小程序实战笔记》，你学废了吗？
前言微信小程序作为近几年"微服务"的杰出代表,应用十分广泛.小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验 ...
微信小程序详解 php,微信小程序canvas基础详解
canvas 元素用于在网页上绘制图形.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像.本文主要和大家分享微信小程序canvas基础详解,希望能帮助到大家. 一.了 ...
小程序怎么清服务器缓存,怎么清理微信小程序缓存微信小程序缓存删除的方法...
微信小程序上线之后,关注的小程序越多,哪么将占用的手机空间就越大,这些程序会产生一定的缓存,那么怎么清理小程序缓存呢?微信小程序内的缓存到底如何清除?和小编一起来看看删除微信小程序缓存的方法吧. 一些 ...
微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）
之前已经介绍过,如何使用百度地图api来获取地理位置信息微信小程序的百度地图获取地理位置 -- 微信小程序教程系列(15) 下面介绍使用百度api来获取天气信息. 1> 第一步:先到百度开放平 ...

【微信小程序】缓存基础——存储、获取、移除、清理(异步)

文章目录

前端页面wxml

js数据定义

*存储缓存

*获取缓存

*移除缓存

*清理缓存

wxss

缓存应用场景

【微信小程序】缓存基础——存储、获取、移除、清理(异步)相关推荐

最新文章

热门文章