微信小程序中有關數據存儲與取值問題

來源：懂視網責編：小OO 時間：2020-11-27 19:39:12

微信小程序中有關數據存儲與取值問題

在小程序開發的過程，經常要需要這個頁面輸入的數據，在下一個頁面中進行取值賦值。比如。在A頁面input輸入框，輸入電話號碼，點擊添加。需要在B頁面電話區域中，顯示剛剛輸入的電話號碼。因為這是兩個頁面，就需要先存儲，再取值。微信小程序提供了數據存儲的API，wx.setStorage(OBJECT) 可以將數據存儲在本地緩存中指定的 key 中，如果重復會覆蓋掉原來該 key 對應的內容。思路是，在A頁面，使用bindinput獲取input輸入的值，賦值給一個變量（自定義），點擊添加按鈕時，如果變量不為空，將變量的值存儲在本地緩存中，在B頁面，使用wx.getStorage(OBJECT) 方法取值。ps ：源代碼在頁面底部。代碼如下：

推薦度：

點擊下載本文 文檔為doc格式

導讀在小程序開發的過程，經常要需要這個頁面輸入的數據，在下一個頁面中進行取值賦值。比如。在A頁面input輸入框，輸入電話號碼，點擊添加。需要在B頁面電話區域中，顯示剛剛輸入的電話號碼。因為這是兩個頁面，就需要先存儲，再取值。微信小程序提供了數據存儲的API，wx.setStorage(OBJECT) 可以將數據存儲在本地緩存中指定的 key 中，如果重復會覆蓋掉原來該 key 對應的內容。思路是，在A頁面，使用bindinput獲取input輸入的值，賦值給一個變量（自定義），點擊添加按鈕時，如果變量不為空，將變量的值存儲在本地緩存中，在B頁面，使用wx.getStorage(OBJECT) 方法取值。ps ：源代碼在頁面底部。代碼如下：

這篇文章主要為大家詳細介紹了微信小程序數據存儲與取值的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在小程序開發的過程，經常要需要這個頁面輸入的數據，在下一個頁面中進行取值賦值。

比如：

在A頁面input輸入框，輸入電話號碼，點擊添加。需要在B頁面電話區域中，顯示剛剛輸入的電話號碼。

因為這是兩個頁面，就需要先存儲，再取值。微信小程序提供了數據存儲的API，wx.setStorage(OBJECT) 可以將數據存儲在本地緩存中指定的 key 中，如果重復會覆蓋掉原來該 key 對應的內容。

思路是，在A頁面，使用bindinput獲取input輸入的值，賦值給一個變量（自定義），點擊添加按鈕時，如果變量不為空，將變量的值存儲在本地緩存中，在B頁面，使用wx.getStorage(OBJECT) 方法取值;

ps : 源代碼在頁面底部

代碼如下：

對input輸入框，綁定事件bindinput="bindKeyInput" ，設置value="{{inputValue}}" ，因為電話號碼為數字，設置type="number" 。對按鈕添加點擊事件bindtap="addbtn"

在JS文件中添加代碼

B頁面代碼

在JS文件中，聲明變量addtel。在頁面切換過來的時候，取出我們剛存儲的值，賦值給變量addtel。在需要顯示電話號碼的地方，用變量來接收。

在JS文件中添加代碼

data:{
 addtel : ''
}

這里在onShow的方法中進行取值，當小程序啟動，或從后臺進入前臺顯示，就會觸發 onShow。

不過，每個微信小程序都可以有自己的本地緩存，使用這些方法時，要注意本地緩存最大為10MB，wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）可以對本地緩存進行設置、獲取和清理。

也可以使用wx.clearStorage（wx.clearStorageSync）來清理緩存。

代碼寫完之后，進行測試。

在輸入框中輸入電話號碼，點擊添加。

OK，取值成功。

A頁面源代碼:

<view class="add-page">
 <input placeholder="輸入手機號添加客戶" type="number" bindinput="bindKeyInput" value="{{inputValue}}" />
 <button type="warn" class="add-btn" bindtap="addbtn" >添加</button>
</view>

var app = getApp()
Page({
 data: {
 inputValue:''
 },
 bindKeyInput:function(e){
 this.setData({
 inputValue: e.detail.value
 })
 },
 addbtn:function(){
 if(this.data.inputValue){
 wx.redirectTo({
 url: '../ordered/ordered'
 })
 wx.setStorage({
 key:"addTel",
 data:this.data.inputValue
 })
 }else{
 wx.showModal({
 title: '手機號為空',
 content: '請輸入手機號碼',
 success: function(res) {
 if (res.confirm) {
 console.log('用戶點擊確定')
 }
 }
 })
 }
 },
 onload:function(){
 //onload
 }

})

B頁面源代碼：

<view class="menu-item">
 <navigator class="menu-item-main" >
 <text class="menu-item-name">電話</text>
 <view class="ordtel">
 <text class="ordtext">{{addtel}}</text>
 <image class="menu-item-icon" src="/image/tel.png"></image>
 </view> 
 </navigator>
</view>

var app = getApp()
Page({
 data:{
 addtel : ''
 },
 onShow:function(){
 var that = this;
 wx.getStorage({
 key: 'addTel',
 success: function(res) {
 console.log(res.data)
 that.setData({
 addtel:res.data
 })
 } 
 })
 }
})

上面是我整理給大家的，希望今后會對大家有幫助。

使用webpack打包處理bundle.js文件過大的問題

使用node實現內置調試

JavaScript的6種正則表達式（詳細教程）

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com