同时存多个变量缓存 微信小程序_微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解...
微信小程序 缓存
关于本地缓存
1.wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)
可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB
2.localStorage 是永久存储
一、异步缓存
wx.setStorage(OBJECT)
将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容
wx.setStorage({
key:"key",
data:"value"
})
wx.getStorage(OBJECT)
从本地缓存中异步获取指定 key 对应的内容。
wx.getStorage({
key: 'key',
success: function(res) {
console.log(res.data)
}
})
wx.getStorageInfo(OBJECT)
异步获取当前storage的相关信息
wx.getStorageInfo({
success: function(res) {
console.log(res.keys)
console.log(res.currentSize)
console.log(res.limitSize)
}
})
wx.removeStorage(OBJECT)
从本地缓存中异步移除指定 key 。
wx.removeStorage({
key: 'key',
success: function(res) {
console.log(res.data)
}
})
二、同步缓存
wx.setStorageSync(KEY,DATA)
将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。
wx.getStorageSync(KEY)
从本地缓存中同步获取指定 key 对应的内容。
wx.getStorageInfoSync
同步获取当前storage的相关信息
wx.removeStorageSync(KEY)
从本地缓存中同步移除指定 key 。
三、清理缓存
wx.clearStorage()
清理本地数据缓存。
wx.clearStorageSync()
同步清理本地数据缓存
关于同步缓存和异步缓存的区别
以Sync(同步,同时)结尾的都是都是同步缓存,二者的区别是,异步不会阻塞当前任务,同步缓存直到同步方法处理完才能继续往下执行。
但是一般情况下不要用清除所有的缓存,如果想要清除相应的缓存,设置对应的缓存内容为空数组就好
关于历史搜索
搜索
历史搜索
删除搜索历史
{{item == null?'暂无数据':item}}
页面
这里有三个绑定事件
bindinput="searchNameInput" 获取用户输入的数据
bindtap="setSearchStorage" 设置本地存储
bindtap="deleteHistory" 删除历史搜索
//获取用户输入框的值
searchNameInput:function(e){
var that = this;
that.setData({
inputValue:e.detail.value
})
}
e.detail.value就代表了当前输入值
当点击搜索的时候,bindtap="setSearchStorage"
//将用户输入的内容存入本地缓存,并且将搜索数据放到首页
setSearchStorage:function(){
var that = this
if(this.data.inputValue != ''){
//调用API向本地缓存存入数据
var searchData = wx.getStorageSync('searchData') || []
searchData.push(this.data.inputValue)
wx.setStorageSync('searchData', searchData)
//读取用户搜索商品
var name = this.data.inputValue
wx.request({
url: 'www.shop.com/home/product/search',
data: {name:name},
method: 'GET',
success: function(res){
that.setData({
goodsList: res.data.info,
})
},
})
}
}
流程这么走:
1.用户输入数据,点击搜索
2.如果数据不为空,加入(设置)本地缓存
3.去服务器搜索用户想要的数据,赋值给这个页面的变量
4.点击删除,去除本地这个key的value
这里的缓存形式的 key=>value
var searchData = wx.getStorageSync('searchData') || []
获取本地名字为'searchData'的缓存,如果'searchData'这个缓存不存在就相当于重新什么一个空数组,赋值给searchData这个变量
searchData.push(this.data.inputValue)
将用户输入的值PUSH进searchData这个变量里
wx.setStorageSync('searchData', searchData)
调用API接口,重新设置key = 'searchData'的这个缓存的value等于searchData
下面的wx.request是请求数据的内容,说腻了,印象够深了。
这里没有绑定获取缓存的bindtap,只要获取到,然后添加到Page里面的data
//从本地获取历史搜索数据
var searchData = wx.getStorageSync('searchData')||[]
this.setData({
searchData:searchData
})
deleteHistory
//删除历史搜索数据
deleteHistory:function(){
var that = this
wx.showModal({
title: '提示',
content: '是否删除历史搜索',
success: function(res) {
if (res.confirm) {
wx.setStorageSync('searchData', []);
wx.switchTab({
url: '/pages/index/index',
})
}
}
})
}
这里是将'searchData'这个key的缓存的value为空数组,而不是使用API提供的wx.clearStorageSync,这个会清除其他的所有缓存,而我只是想清除这一个key的缓存
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
同时存多个变量缓存 微信小程序_微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解...相关推荐
- 《微信小程序-进阶篇》package.json版本说明及各类版本符号详解(一)
大家好,这是小程序系列的第十一篇文章,在这一个阶段,我们的目标是 由简单入手,逐渐的可以较为深入的了解组件化开发,并且实践积累一些后续项目也就是原神资料站中用得着的组件: 1.<微信小程序-基础 ...
- 如何微信链接自定义_微信链接自定义
微信在分享第三方网站是不显示缩略图和描述的,如下图所示 微信链接自定义_微信链接自定义 要解决这个问题必须调用微信JS-SDK接口,下面讲一下如何调用接口. 第一部分 准备步骤 注册微信公众号. 通过 ...
- 【京准小课堂】NTP网络校时服务器(时间同步系统)参数详解
[京准小课堂]NTP网络校时服务器(时间同步系统)参数详解 [京准小课堂]NTP网络校时服务器(时间同步系统)参数详解 1.系统概述 在信息时代的今天,准确统一的时钟系统已广泛的应用在车站.医院.学校 ...
- 神经网络学习小记录68——Tensorflow2版 Vision Transformer(VIT)模型的复现详解
神经网络学习小记录68--Tensorflow2版 Vision Transformer(VIT)模型的复现详解 学习前言 什么是Vision Transformer(VIT) 代码下载 Vision ...
- mysql传数据到微信小程序_微信小程序直播 数据同步与转存
本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发.Nodejs.Python.Linux.IT资讯等板块. 本教程所用项目框架为egg ...
- android 清理缓存动画,Android仿微信清理内存图表动画(解决surfaceView屏幕闪烁问题)demo实例详解...
最近接了一个项目其中有功能要实现一个清理内存,要求和微信的效果一样.于是想到用surfaceView而不是继承view.下面小编给大家解析下实现思路. surfaceView是为了解决频繁绘制动画产生 ...
- 下拉多选框 微信小程序_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下 适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等 一.省市三级联动使用 注意mode = ...
- 用python写一个抽奖小程序_微信小程序抽奖助手一键参与抽奖
写在前头的话 最近"沉迷"于微信一款小程序,就是抽奖助手.反正这个抽奖几乎不用什么成本, 就是一个个抽奖活动点进去点击参与抽奖比较麻烦.要是如果有个程序一键解决这些步骤,那就是零成 ...
- webview 个人小程序_微信小程序新增Webview它是什么东西?
原标题:微信小程序新增Webview,它是什么东西? 今天刚刚给客户做完案子,正准备去睡觉.2017 今天刚刚给客户做完案子,正准备去睡觉.2017年11月3日 11:29看到了微信公众平台推送的小程 ...
最新文章
- C语言随机字母生成,C++ 随机数字以及随机数字加字母生成的案例
- SoapUi测试,测试相关问答知识
- RedisLive监控工具 windows部署笔记
- 【机器学习基础】数学推导+纯Python实现机器学习算法28:CRF条件随机场
- 最强的游戏计算机,这可能是市面上体积最小性能最强的游戏主机了
- php如何接收前端返回的各种类型的数据
- dropload.js无限刷新解决方案
- 利用PUT方式上传文件的方法研究
- LeetCode--85.最大矩形(单调栈)
- PHP 长连接,奏是这么简单
- Android Theme 主题总结
- web测试之总流程归纳
- 如何安装matlab2016b
- Java8新特性之Lambda表达式
- 2-Centos7下安装部署RabbitMQ
- BZOJ 2145 悄悄话
- (四)Selenium通过谷歌插件实现使用隧道代理
- es 按条件查询数据总条数
- 基于Anki+Vocabulary的英语单词记忆法
- java中有测试方法主方法不运行_java – 我的Eclipse无法再运行(或调试)我的JUnit测试...