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

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

// app.js
App({
  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.js
Page({
  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方法从本地存储中获取用户信息，并将其更新到页面上。请注意，这只是一个简单的示例，实际应用中可能需要更多的数据验证和错误处理。