微信小程序入门（八）：缓存数据-多条数据（数组）

对于缓存数据，上一节只是针对一个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去存储多条数据的的程序就编写完毕！