微信小程序-本地存储案例

以下是一个简单的微信小程序示例,可以显示一个按钮和点击按钮后的本地存储操作:

// app.jsApp({ onLaunch: function () { // 小程序启动时执行的代码 }, globalData: { userInfo: null, }})
<!-- index.wxml --><view class="container"> <button bindtap="saveData">保存数据</button> <text>用户信息为: {{ userInfo }}</text></view>
/* index.wxss */.container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh;}button { margin-top: 20px; padding: 10px 20px;}
// index.jsPage({ data: { userInfo: null, }, saveData: function () { const app = getApp() app.globalData.userInfo = { name: '张三', age: 20 } wx.setStorage({ key: 'userInfo', data: app.globalData.userInfo, success: (res) => { console.log('保存数据成功', res) }, fail: (err) => { console.log('保存数据失败', err) } }) }, onLoad: function () { const app = getApp() if (app.globalData.userInfo !== null) { this.setData({ userInfo: app.globalData.userInfo }) } else { wx.getStorage({ key: 'userInfo', success: (res) => { app.globalData.userInfo = res.data this.setData({ userInfo: app.globalData.userInfo }) }, fail: (err) => { console.log('获取数据失败', err) } }) } }})

这个小程序有一个页面,页面上有一个按钮。当用户点击按钮时,程序会调用saveData函数,将用户信息存储在本地。用户信息将存储在全局变量userInfo中,并使用微信小程序的wx.setStorage方法将其保存到本地存储中。在页面加载时,程序将检查全局变量userInfo中是否存在用户信息,如果存在,则将其更新到页面上。如果用户信息不存在,则使用微信小程序的wx.getStorage方法从本地存储中获取用户信息,并将其更新到页面上。请注意,这只是一个简单的示例,实际应用中可能需要更多的数据验证和错误处理。

相关文章