博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
转:微信小程序之缓存,(本地缓存,同步缓存,异步缓存)
阅读量:5328 次
发布时间:2019-06-14

本文共 4416 字,大约阅读时间需要 14 分钟。

转自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

你可能感兴趣的文章
spring-使用MyEcilpse创建demo
查看>>
DCDC(4.5V to 23V -3.3V)
查看>>
kettle导数到user_用于left join_20160928
查看>>
activity 保存数据
查看>>
typescript深copy和浅copy
查看>>
linux下的静态库与动态库详解
查看>>
hbuilder调底层运用,多张图片上传
查看>>
深入理解基于selenium的二次开发
查看>>
较快的maven的settings.xml文件
查看>>
Git之初体验 持续更新
查看>>
随手练——HDU 5015 矩阵快速幂
查看>>
Maven之setting.xml配置文件详解
查看>>
SDK目录结构
查看>>
malloc() & free()
查看>>
HDU 2063 过山车
查看>>
高精度1--加法
查看>>
String比较
查看>>
Django之Models
查看>>
CSS 透明度级别 及 背景透明
查看>>
Linux 的 date 日期的使用
查看>>