应用(1)——同一页面调取data和示例:数据存储调用
作者:互联网
1.同一页面获取data值 就在于var that和that.data.key
Page({
data:{
key:'this is key'
},
keyInput; function(e){ //给key的input一个bindinput,使输入时即触发keyInput,同步将输入的值传给js里的key
this.setData({ key: e.detail.value })
},
showKey: function(){ //在Console展示key的值
var that = this;
console.log(that.data.key)
}
})
2.缓存数据时的js page:
setStorage:function(e) {
let key=this.data.key; //获取key的值
if(key.length == 0) { //判空
wx.showToast({
title: 'KEY不能为空',
icon: 'none'
})
}else{
wx.setStorage({ //调用API
data: this.data.data, //???????this.data调取page的data,this.data.data使用data里的data
key: 'key'
})
}
}//在调试器的storage里可以看到key和data
例:完整的存储调取
wxml页面
<view class='title'> 数据存储setStorage </view>
<view class="demo-box">
<input name='key' placeholder="输入key" bindinput="keyInput" />
<input name='data' placeholder='输入data' bindinput='dataInput' />
<button type='primary' bindtap='setStorage'>存储</button>
</view>
<view style='height:100px'></view>
<view class='title'> 数据获取getStorage </view>
<view class="demo-box">
<input name='Fkey' placeholder="查询的key" bindinput="FkeyInput" />
<button type='primary' bindtap="getStorage">数据获取</button>
<view class="title">DATA的值:{{Fdata}}</view>
</view>
wxss页面
.demo-box{ margin:10px; padding:10rpx; }
js页面
Page({
data:{
key:'',
data:'',
Fkey:'',
Fdata:''
},
keyInput:function(e){
this.setData({ key:e.detail.value })
},
dataInput:function(e){
this.setData({ data:e.detail.value })
},
FkeyInput: function(e){
this.setData({ Fkey:e.detail.value })
},
setStorage:function(e) {
let key=this.data.key;
if(key.length == 0) {
wx.showToast({
title: 'KEY不能为空',
icon: 'none'
})
}else{
wx.setStorage({
data: this.data.data,
key: 'key'
})
}
},
getStorage: function() {
var that = this;
let Fkey=that.data.Fkey;
if(Fkey.length==0) {
wx.showToast({
title: 'KEY不能为空',
icon:'none'
})
}else{
wx.getStorage({
key: Fkey, //key是指定的,指本地缓存中指定的key
success:function(res){
that.setData({ Fdata:res.data })
}
})
}
}
})
标签:function,setStorage,示例,key,Fkey,data,调取,wx 来源: https://www.cnblogs.com/rt8090/p/14069324.html