简单效果图展示：这里存储是固定数据，可更换为动态数据
一、首先在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: "",
},
onLoad: 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
