当我们做 微信小程序开发的时候，我们经常要与后台打交道，做一些数据缓存的工作
用到的方法为
第一步:存储数据
首先我们要定义初始化的值 默认为空 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){
-
(res)
-
({
-
key:
-
})
-
},
-
dataChange:function(res){
-
(res)
-
({
-
data:
-
})
-
},
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>
( key, data)
什么的data是要存储的内容，key是以这个名字进行存储，方便以后查找
我们首先要定义一个key 和data 让它们等于数组对象中的key和data 然后让数据存储中的等于我们定义的，这样方便，当我们输入完成以后点击数据存储按钮数组data中的数据赋值给data存入了
-
setStorage:function(){
-
var key =
-
var data =
-
if(key){
-
(key, data)
-
({
-
key:key,
-
data:data,
-
info:"key="+key+" data="+data
-
})
-
}else{
-
({
-
info:"请输入key值"
-
})
-
}
-
},
第二部：数据读取
当我们点击数据读取按钮时 key值已经是数组中的key值了，如果存的数据中有输入时候的key值那么就就调用 data=(key) 给data从存入的数据查找内容赋值
-
getStorage:function(){
-
var key =
-
var data
-
if(key){
-
data=(key)
-
({
-
info:"key="+key+" data="+data
-
})
-
}else{
-
({
-
info:"请输入key值"
-
})
-
}
-
},
第三部：数据删除
给原来的数组的内容赋值为空即可 但还是要调()方法
-
clearStorage:function(){
-
()
-
({
-
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
-
//
-
// 获取应用实例
-
const app = getApp()
-
-
Page({
-
data: {
-
key:"",
-
data:"",
-
info:""
-
},
-
keyChange:function(res){
-
(res)
-
({
-
key:
-
})
-
},
-
dataChange:function(res){
-
(res)
-
({
-
data:
-
})
-
},
-
setStorage:function(){
-
var key =
-
var data =
-
if(key){
-
(key, data)
-
({
-
key:key,
-
data:data,
-
info:"key="+key+" data="+data
-
})
-
}else{
-
({
-
info:"请输入key值"
-
})
-
}
-
},
-
getStorage:function(){
-
var key =
-
var data
-
if(key){
-
data=(key)
-
({
-
info:"key="+key+" data="+data
-
})
-
}else{
-
({
-
info:"请输入key值"
-
})
-
}
-
},
-
clearStorage:function(){
-
()
-
({
-
key:"",
-
data:"",
-
info:"数据清理成功"
-
})
-
},
-
onLoad() {
-
-
},
-
-
-
})
效果图
