對于緩存數(shù)據(jù)压汪，上一節(jié)只是針對一個key忘蟹，緩存一條數(shù)據(jù)（一個字符串），而面對一個key存儲多條數(shù)據(jù)的情況下雾鬼，則key對應一個數(shù)組則可以滿足我們的需求。
index.wxml
<view class='container_index'>
<input bindblur='inputChanged' placeholder='輸入緩存內(nèi)容' class='input'></input>
<button bindtap='saveData' class='btn'>SaveData</button>
<view class='text_title'>本地緩存數(shù)據(jù)</view>
<block wx:for='{{arry_data}}'>
<view>{{item}}</view>
</block>
</view>
index.js
//index.js
//獲取應用實例
const app = getApp()
// 存儲數(shù)據(jù)的方法
var saveExprs = function(expr) {
//獲取存儲數(shù)據(jù)的數(shù)組
var exprs = wx.getStorageSync("save_array") || []
//向數(shù)組中添加新的元素
exprs.unshift(expr)
//將添加的元素存儲到本地
wx.setStorageSync("save_array", exprs)
}
Page({
data: {
key: 'save_array',
save_data: "",
arry_data: []
},
//輸入框監(jiān)聽方法宴树，獲取輸入框輸入的內(nèi)容
inputChanged(e) {
console.log(e)
//將輸入框輸入的信息同步到data中
this.setData({
save_data: e.detail.value
})
},
//存儲數(shù)據(jù)
saveData(e) {
//存儲數(shù)據(jù)到本地
console.log(this.data.save_data)
if(this.data.save_data==''){
wx.showToast({
title: '輸入數(shù)據(jù)不能為空',
icon: 'none'
})
return
}
saveExprs(this.data.save_data)
//獲取緩存數(shù)據(jù)
var exprs = wx.getStorageSync("save_array") || []
this.setData({
arry_data: exprs
})
},
})
index.wxss
/**index.wxss**/
.container_index {
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.btn{
width: 95%;
margin: 10rpx;
}
.input{
border: 1px solid #eee;
border-radius: 5px;
padding: 10rpx;
margin: 10rpx;
}
.text_title{
display: flex;
flex-direction: column;
align-items: center;
width: 95%;
color: orange;
}
.text_show{
width: 95%;
}
編譯代碼策菜，小程序運行結(jié)果如下圖：
8-1.png
點擊存儲數(shù)據(jù)按鈕，進行多條數(shù)據(jù)的添加酒贬，程序運行結(jié)果如下圖所示：
8-2.png
至此又憨，一個key去存儲多條數(shù)據(jù)的的程序就編寫完畢！
