微信小程序本地存储与获取展示

本文主要是介绍微信小程序本地存储与获取展示，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

简单效果图展示：这里存储是固定数据，可更换为动态数据

一、首先在WXML中加上两个按钮

<view style="margin-top:20px;">
  <button type="primary" bindtap="saveStorage">本地存储</button>
</view>
<view style="margin-top:20px;">
  <button type="primary" bindtap="getStorage">本地读取</button>
</view>
<text>读取：{{getStorage}}</text>

二、按钮与文本添加好后，在对应的JS 文件中增加按钮与文本绑定事件

1、 本地存储按钮事件：

 saveStorage: function (e) {
      console.log('开始保存')
      wx.setStorage({
        key: 'key1',
        data: '我是测试存储数据。',
        success: function (res) {
          console.log('异步保存成功')
        }
      })
      wx.setStorageSync('key2', 'data2')
      console.log('同步保存成功')
    },

 2、本地读取按钮事件：

getStorage: function () {
      var that = this;
      wx.getStorage({
        key: 'key1',
        success: function (res) {
          console.log(res.data)
          app.globalData.getcontent= res.data
          that.setData({
            // getStorage: res.data
            getStorage: app.globalData.getcontent
          })
        }
      })
    }

三、这里用上了全局变量进行赋值

1、首先在app.js中对全局变量进行定义

2、然后在对应页面中引用这个全局变量

首先在JS文件顶部声明var app=getApp(); 然后对全局变量进行引用和赋值。
全部示例代码：

var app = getApp()

Page({
 globalData: {
      getcontent: "",//定义全局变量
    },

 /**
     * 页面的初始数据
     */
    data: {//这里是局部变量
      username: '',
      userpws: "",

    },

  onl oad: function () {

    this.setData({


    });

  }

 saveStorage: function (e) {
      console.log('开始保存')
      wx.setStorage({
        key: 'key1',
        data: '我是测试存储数据。',
        success: function (res) {
          console.log('异步保存成功')
        }
      })
      wx.setStorageSync('key2', 'data2')
      console.log('同步保存成功')
    },

 
    getStorage: function () {
      var that = this;
      wx.getStorage({
        key: 'key1',
        success: function (res) {
          console.log(res.data)
          app.globalData.getcontent= res.data//赋值给变量
          that.setData({
            // getStorage: res.data
            getStorage: app.globalData.getcontent//更新到UI
          })
        }
      })
    }

})

                                                           -END

这篇关于微信小程序本地存储与获取展示的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！