微信小程序 Switch按钮 实现本地存储

index.js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {

  },
  bindchange: function (e) {
    console.log(e.detail.value);
    wx.setStorageSync('value1', e.detail.value);
  }
  ,
  bindchange2: function (e) {
    console.log(e);
    wx.setStorageSync('bindchange2', e.detail.value);
  },
  bindchange3: function (e) {
    console.log(e.detail.value);
    wx.setStorageSync('bindchange3', e.detail.value);
  },
  bindchange4: function (e) {
    console.log(e.detail.value);
    wx.setStorageSync('bindchange4', e.detail.value);
  },
  //事件处理函数

  onLoad: function (options) {
    this.setData({
      value1: wx.getStorageSync('value1')
    }),
      this.setData({
        value2: wx.getStorageSync('bindchange2')
      }),
      this.setData({
        value3: wx.getStorageSync('bindchange3')
      }),
      this.setData({
        value4: wx.getStorageSync('bindchange4')
      })
    },
    
 
})
           

index.wxml

<!--pages/switch/switch.wxml-->
<view style='background-color:#cccccc;height:600px;'>
<view style='padding-top:10px;'></view>
<view style='display:flex;flex-direction:row;background-color:#ffffff;height:50px;line-height:50px;'><view style='font-weight:bold'>接收新消息通知</view>
<view style='position:absolute;right:10px;'>
 <switch type='switch' bindchange='bindchange' checked='{{value1}}'/>
</view>
</view>

<view style='height:1px;background-color:#f2f2f2;opacity:0.2'></view>
<view style='display:flex;flex-direction:row;background-color:#ffffff;height:50px;line-height:50px;'>
<view style='font-weight:bold'>通知显示消息详情</view>
<view style='position:absolute;right:10px;'>
 <switch type='switch' bindchange='bindchange2' checked='{{value2}}'/>
</view>
</view>
<view style='height:1px;background-color:#f2f2f2;opacity:0.2'></view>

<view style='margin-top:20px;'></view>
<view style='height:1px;background-color:#f2f2f2;opacity:0.2'></view>
<view style='display:flex;flex-direction:row;background-color:#ffffff;height:50px;line-height:50px;'><view style='font-weight:bold'>声音</view>
<view style='position:absolute;right:10px;'>
<switch type='checkbox'bindchange='bindchange3' checked='{{value3}}'/>
</view>
</view>

<view style='height:1px;background-color:#f2f2f2;opacity:0.2'></view>
<view style='height:1px;background-color:#f2f2f2;opacity:0.2'></view>
<view style='display:flex;flex-direction:row;background-color:#ffffff;height:50px;line-height:50px;'><view style='font-weight:bold'>震动</view>
<view style='position:absolute;right:10px;'>
<switch type='checkbox'bindchange='bindchange4' checked='{{value4}}'/>
</view>
</view>
<view style='height:1px;background-color:#f2f2f2;opacity:0.2'></view>
</view>
           

实现效果