对于缓存数据，上一节只是针对一个key，缓存一条数据（一个字符串），而面对一个key存储多条数据的情况下，则key对应一个数组则可以满足我们的需求。
index.wxml
<view class='container_index'>
<input bindblur='inputChanged' placeholder='输入缓存内容' class='input'></input>
<button bindtap='saveData' class='btn'>SaveData</button>
<view class='text_title'>本地缓存数据</view>
<block wx:for='{{arry_data}}'>
<view>{{item}}</view>
</block>
</view>
index.js
//index.js
//获取应用实例
const app = getApp()
// 存储数据的方法
var saveExprs = function(expr) {
//获取存储数据的数组
var exprs = wx.getStorageSync("save_array") || []
//向数组中添加新的元素
exprs.unshift(expr)
//将添加的元素存储到本地
wx.setStorageSync("save_array", exprs)
}
Page({
data: {
key: 'save_array',
save_data: "",
arry_data: []
},
//输入框监听方法，获取输入框输入的内容
inputChanged(e) {
console.log(e)
//将输入框输入的信息同步到data中
this.setData({
save_data: e.detail.value
})
},
//存储数据
saveData(e) {
//存储数据到本地
console.log(this.data.save_data)
if(this.data.save_data==''){
wx.showToast({
title: '输入数据不能为空',
icon: 'none'
})
return
}
saveExprs(this.data.save_data)
//获取缓存数据
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%;
}
编译代码，小程序运行结果如下图：
8-1.png
点击存储数据按钮，进行多条数据的添加，程序运行结果如下图所示：
8-2.png
至此，一个key去存储多条数据的的程序就编写完毕！
