微信小程序获取Input框内的值,将多条数据存储在缓存总
时间: 2024-03-30 16:35:03 浏览: 72
微信小程序登录时如何获取input框中的内容
在微信小程序中,可以通过 `bindinput` 事件来获取Input框内的值,再通过 `wx.setStorageSync` 方法将多条数据存储在缓存中。
示例代码:
```
<view>
<input bindinput="onInput" placeholder="请输入内容"></input>
<button bindtap="onSave">保存</button>
</view>
```
```
Page({
data: {
inputValue: '', // Input框的值
dataList: [] // 保存的数据列表
},
// 输入框内容变化时触发
onInput(event) {
this.setData({
inputValue: event.detail.value // 更新Input框的值
})
},
// 点击保存按钮时触发
onSave() {
const { dataList, inputValue } = this.data
if (!inputValue) return // 如果Input框的值为空,则不保存
dataList.push(inputValue) // 将新的数据添加到列表中
wx.setStorageSync('dataList', dataList) // 将数据列表存储在缓存中
this.setData({
inputValue: '' // 清空Input框的值
})
wx.showToast({
title: '保存成功',
icon: 'success'
})
}
})
```
在上面的示例中,我们通过 `onInput` 方法来更新Input框的值,通过 `onSave` 方法来保存数据。在 `onSave` 方法中,我们首先判断Input框的值是否为空,如果为空则不保存。然后将新的数据添加到数据列表中,并调用 `wx.setStorageSync` 方法将数据列表存储在缓存中。最后清空Input框的值,并通过 `wx.showToast` 方法显示保存成功的提示。
阅读全文