微信小程序开发数据缓存基础知识辨析及运用实例详解

wx.setStorageSync("name","张三") 

wx.setStorage({
 data: "李四",
 key: 'name1',
 }) 

var b=wx.getStorageSync('name')
 console.log(b);

var a=wx.getStorage({
 key: 'name1',
 })
 a.then(e=>{
 console.log(e.data);
 
 })

 wx.removeStorage({
 key: 'name1',
 })

wx.removeStorageSync('name')

wx.clearStorage()
wx.clearStorageSync()

tongbu:function(){
 wx.setStorageSync("name","张五") //同步api
 var a=wx.getStorageSync('name')
 console.log(a);
}

yibu:function(){
 wx.setStorage({
 data: "李柳",
 key: 'name1',
 })
 var a=wx.getStorageSync('name1')
 console.log(a);

}
})

/**index.wxss**/
.userinfo {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.userinfo-avatar {
 width: 128rpx;
 height: 128rpx;
 margin: 20rpx;
 border-radius: 50%;
}

.userinfo-nickname {
 color: #aaa;
}

.usermotto {
 margin-top: 200px;
}

image{
 margin-top: 20px;
 margin-bottom: 20px;
 width: 50px;
 height: 50px;
}

<!--index.wxml-->
<view class="container">
 <button bindtap="getmessage">获取用户信息</button>
<view>头像</view>
<view><image src="/UploadFiles/2021-04-02/{{pictureurl}}">

index.js


// pages/index/index.js
Page({

 /**
 * 页面的初始数据
 */
 data: {
  name:'张三',
  pictureurl:'../index/4.png'
 },
 getmessage:function(){
 var a=new Promise((resolve,reject)=>{
 wx.getUserInfo({
  success: function(res) {
  resolve(res)
  }
 })
 })//获取用户数据，前提是已经取得了访问权限
 a.then(res=>{
 this.setData({
  name:res.userInfo.nickName,
  pictureurl:res.userInfo.avatarUrl
 })//将访问得到的数据渲染到页面中
 wx.setStorage({
  data: res.userInfo.nickName,//name中存入用户名信息
  key: 'name',
 })
 wx.setStorage({
  data: res.userInfo.avatarUrl,//pictureurl中存入用户头像的url地址
  key: 'pictureurl',
 })
 })//同时将渲染的数据缓存
 },
 /**
 * 生命周期函数--监听页面加载，加载页面，触发onLoad。此时就可以将数据渲染
 */
 onLoad: function (options) {
 var name=wx.getStorageSync('name')//从缓存中读取用户名信息
 var url=wx.getStorageSync('pictureurl')//从缓存中读取头像url
 console.log(name);
 console.log(url);
 this.setData({
  name:name,
  pictureurl:url
 })
 
 }
})



渲染后的结果示例，第一次点击获取用户数据按钮后当刷新或者关闭后重启程序都会是此页面