当我们做 微信小程序开发的时候,我们经常要与后台打交道,做一些数据缓存的工作
用到的方法为 wx.setStorage wx.getStorage wx.clearStorage
第一步:存储数据
首先我们要定义初始化的值 默认为空 js中
data: {
key:"",
data:"",
info:""
},
然后利用input标签为其绑定一个bindinput属性 方法就是key值和data值改变的方法在js中会定义的
<input class="border-bottom" placeholder="请输入key值" name="key" value="{
{key}}" bindinput="keyChange" type="text"/>
<input class="border-bottom" placeholder="请输入data值" name="data" value="{
{data}}" bindinput="dataChange" type="text"/>
当我们在input标签中输入内容的时候,bindinput事件就会随时记录下我们输入的内容,并会触发keyChange方法,会记录在object下的detail中的value中,我们把输入框中的值付给我们空的key
keyChange:function(res){
console.log(res)
this.setData({
key:res.detail.value
})
},
dataChange:function(res){
console.log(res)
this.setData({
data:res.detail.value
})
},
res是返回的结果,应该是一个object字符串注意赋值的路径 data也是同样的方法
当我们输入赋值完成之后就要存储数据了
为一个按钮绑定一个点击事件,点击之后会触发自定义的setStorage方法,
<view class="padding">
<button type="primary" bindtap="setStorage">存储数据</button>
<button type="margin" bindtap="getStorage">读取数据</button>
<button type="margin" bindtap="clearStorage">清理数据</button>
</view>
wx.setStorageSync( key, data)
什么的data是要存储的内容,key是以这个名字进行存储,方便以后查找
我们首先要定义一个key 和data 让它们等于数组对象中的key和data 然后让数据存储中的等于我们定义的,这样方便,当我们输入完成以后点击数据存储按钮数组data中的数据赋值给data存入了
setStorage:function(){
var key = this.data.key
var data = this.data.data
if(key){
wx.setStorageSync(key, data)
this.setData({
key:key,
data:data,
info:"key="+key+" data="+data
})
}else{
this.setData({
info:"请输入key值"
})
}
},
第二部:数据读取
当我们点击数据读取按钮时 key值已经是数组中的key值了,如果存的数据中有输入时候的key值那么就就调用 data=wx.getStorageSync(key) 给data从存入的数据查找内容赋值
getStorage:function(){
var key = this.data.key
var data
if(key){
data=wx.getStorageSync(key)
this.setData({
info:"key="+key+" data="+data
})
}else{
this.setData({
info:"请输入key值"
})
}
},
第三部:数据删除
给原来的数组的内容赋值为空即可 但还是要调wx.clearStorage()方法
clearStorage:function(){
wx.clearStorage()
this.setData({
key:"",
data:"",
info:"数据清理成功"
})
},
完整版的代码如下
HTML
<view class="padding">
<input class="border-bottom" placeholder="请输入key值" name="key" value="{
{key}}" bindinput="keyChange" type="text"/>
<input class="border-bottom" placeholder="请输入data值" name="data" value="{
{data}}" bindinput="dataChange" type="text"/>
<view class="padding">
<button type="primary" bindtap="setStorage">存储数据</button>
<button type="margin" bindtap="getStorage">读取数据</button>
<button type="margin" bindtap="clearStorage">清理数据</button>
</view>
<!-- 数据处理结果 -->
<view class="padding">
数据处理结果:
<text class="text-red">{
{info}}</text>
</view>
</view>
js
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
key:"",
data:"",
info:""
},
keyChange:function(res){
console.log(res)
this.setData({
key:res.detail.value
})
},
dataChange:function(res){
console.log(res)
this.setData({
data:res.detail.value
})
},
setStorage:function(){
var key = this.data.key
var data = this.data.data
if(key){
wx.setStorageSync(key, data)
this.setData({
key:key,
data:data,
info:"key="+key+" data="+data
})
}else{
this.setData({
info:"请输入key值"
})
}
},
getStorage:function(){
var key = this.data.key
var data
if(key){
data=wx.getStorageSync(key)
this.setData({
info:"key="+key+" data="+data
})
}else{
this.setData({
info:"请输入key值"
})
}
},
clearStorage:function(){
wx.clearStorage()
this.setData({
key:"",
data:"",
info:"数据清理成功"
})
},
onLoad() {
},
})
效果图