转:微信小程序之缓存,(本地缓存,同步缓存,异步缓存)

转自CSDN:https://blog.csdn.net/Jensen_Yao/article/details/79480717?utm_source=blogxgwz1

关于本地缓存
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( 同步, 同时) 结尾的都是都是同步缓存, 二者的区别是, 异步不会阻塞当前任务, 同步缓存直到同步方法处理完才能继续往下执行。

但是一般情况下不要用清除所有的缓存, 如果想要清除相应的缓存, 设置对应的缓存内容为空数组就好

关于历史搜索

<
input type = "text"
class = "search-icon"
placeholder = "请输入要搜索的内容"
bindinput = "searchNameInput" / >
<text bindtap="setSearchStorage">搜索</text>

<
view >
<view>
<text style="float:left;" bindtap="deleteHistory">历史搜索</text>
<text style="float:right;" bindtap="deleteHistory">删除搜索历史</text>
</view> <
view >
<view class="search-list" wx:for="{{searchData}}" wx:key="item">
<view>{{item == null?‘暂无数据‘:item}}</view>
</view> <
/view> <
/view>
页面

这里有三个绑定事件

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的缓存
-- -- -- -- -- -- -- -- -- -- -
作者: IYiu
来源: CSDN
原文: https: //blog.csdn.net/Jensen_Yao/article/details/79480717
版权声明: 本文为博主原创文章, 转载请附上博文链接!

——————————————————————————————————————

关于本地缓存
1. wx.setStorage(wx.setStorageSync)、
wx.getStorage(wx.getStorageSync)、
wx.clearStorage(wx.clearStorageSync)
可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB

2. localStorage 是永久存储

一、异步缓存
1. wx.setStorage(object)
将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容

2. wx.getStorage(object)
从本地缓存中异步获取指定 key 对应的内容。

3. wx.getStorageInfo(object)
异步获取当前storage的相关信息

4.

二、同步缓存
1. wx.setStorageSync(key,data)
将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。

2. wx.getStorageSync(key)
从本地缓存中同步获取指定 key 对应的内容。

3. wx.getStorageInfoSync
同步获取当前storage的相关信息

4. wx.removeStorageSync(key)
从本地缓存中同步移除指定 key 。

三、清理缓存
1. wx.clearStorage()
清理本地数据缓存。

2. wx.clearStorageSync()
同步清理本地数据缓存

关于同步缓存和异步缓存的区别
以Sync(同步,同时)结尾的都是都是同步缓存,二者的区别是,异步不会阻塞当前任务,同步缓存直到同步方法处理完才能继续往下执行。
但是一般情况下不要用清除所有的缓存,如果想要清除相应的缓存,设置对应的缓存内容为空数组就好

原文地址:https://www.cnblogs.com/lemonote/p/9849639.html

时间: 2024-11-10 17:46:00

转:微信小程序之缓存,(本地缓存,同步缓存,异步缓存)的相关文章

微信小程序环境搭建(本地,测试,生产)

1.本地 官网文档:https://cloud.tencent.com/document/product/619/11442#.E6.9C.AC.E5.9C.B0.E5.A6.82.E4.BD.95.E6.90.AD.E5.BB.BA.E5.BC.80.E5.8F.91.E7.8E.AF.E5.A2.83 1.配置 config.js,修改server/config.js,增加如下配置,并修改 MySQL 相关的配置为您本地的 MySQL 数据库,也是这个文件,注意 { // 其他配置 ...

使用linux自建证书(ios强制https 微信小程序强制https 本地开发环境)

前言:  作为一个运维人员不背锅,谁背呢! 正文: 现在都要https了,很多童鞋也痛苦本地该如何搭建https环境,网上一搜 一搜一大把,但是使用就...... 今天在这里笔者就教大家一步一步使用linux搭建本地的https环境...因我司使用的nginx 所以接口相关的服务端配置 也只列出nginx 的配置接下来看笔者如何一步一步弄好https.(可以调用openssl命令雷同!) 假设我司有alp环境,bet环境 我司线上域名为test.com 对应的则为 test.alp test.b

微信小程序学习记录(一)

如何定义一个全局变量: 1,在根目录下app.js中添加 App({ globalData: { g_isPlayingMusic : false, g_currentMusicPostId :null, doubanbase:"https://api.douban.com", self_reduction:"自减" } }) 2,在js中访问我们的全局变量 var app = getApp(); //全局的 getApp() 函数可以用来获取到小程序实例. onL

微信小程序之仿微信漂流瓶

周末找事做做.看到微信里有个漂流瓶.试着敲了敲. 这里是用leancloud做后台.涉及到语音和文字的储存,查询.自己不会写后台代码,对于我算是个福利. 欢迎交流! 技术点: 1.微信小程序开发之录音机 音频播放 动画 (真机可用) 2.微信小程序开发之用户系统 一键登录 获取session_key和openid 3.微信小程序开发之常见问题 不在以下合法域名列表中 wx.request合法域名配置 4.微信小程序开发之本地图片上传(leancloud) 下面带图说模块: 1.主页面 三个but

微信小程序开发提升效率

http://www.ifanr.com/minapp/790017 微信小程序的 API 实现需要兼顾方方面面,所以仍然使用 callback 写法. 众所周知,Callback-Hell(回调地狱)是传统 JS 语法上的历史问题.但毕竟称手的工具是开发效率的源泉,因此笔者对当前版本的微信小程序 API 做了简单的封装--weapp. 同时,微信小程序框架本身专注于交互和 UI 的实现,并未提供内置的状态管理.如果众多的异步操作都直接在 App 或 Page 中一一实现,相信开发起来会很困难,

微信小程序image组件开发程序以及相关图片问题参考资料汇总

微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对微信小程序新手还是正在开发中的朋友都是很好的小程序学习资料. 微信小程序image组件必备基础知识: image组件默认宽度300px.高度225px image的属性mode有13种模式,其中4种是缩放模式,9种是裁剪模式 image组件开发教程汇总: 微信小程序自定义组件实现图片单指拖动.双指缩

微信小程序开发本地数据缓存教程

微信小程序开发过程中,本地数据缓存是必不可少的一部分.而且本地数据缓存的用途还挺多的,下面木鱼小铺(https://www.muyu007.cn)就和大家分享一下微信小程序开发本地数据缓存教程,希望对大家有所帮助! 第一步:读写本地数据缓存 微信小程序为了方便开发者缓存数据提供了读写本地数据缓存接口,读本地数据缓存采用的是wx.getStorage/wx.getStorageSync接口,写本地数据缓存的是wx.setStorage/wx.setStorageSync接口.其中以Sync结尾的是

微信小程序开发之数据存储 参数传递 数据缓存

微信小程序开发内测一个月.数据传递的方式很少.经常遇到页面销毁后回传参数的问题,小程序中并没有类似Android的startActivityForResult的方法,也没有类似广播这样的通讯方式,更没有类似eventbus的轮子可用. 现在已知传递参数的方法只找到三种,先总结下.由于正处于内测阶段,文档也不是很稳定,经常修改,目前尚没有人造轮子. 先上GIF: 1.APP.js 我把常用且不会更改的参数放在APP.js的data里面了.在各个page中都可以拿到var app = getApp(

微信小程序 缓存说明

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

微信小程序-数据缓存

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