小程序极速实战开发《二十八》wx.storage数据缓存

发布：2018-01-25 16:20浏览：次来源：网络作者：tianshu

接口说明:

即通过调用接口

wx.setStorage（wx.setStorageSync）
wx.getStorage（wx.getStorageSync）
wx.removeStorage (wx.removeStorageSync)
wx.clearStorage（wx.clearStorageSync）
wx.getStorageInfo（wx.getStorageInfoSync）

对每个微信小程序的本地缓存（localStorage）进行增删改查的操作。目前本地缓存最大空间限制在10MB以内（从原先的5MB升级到10MB，意味着这不是最终大小，可能更改），同时，本地缓存将是永久存储的，不会随着用户的退出而清除，所以不建议将关键信息全部存在 localStorage，以防用户换设备的情况

同步方法会堵塞当前任务，直到同步方法处理返回。
异步方法不会塞当前任务。

故：如果异步存数据后立刻取数据代码段，则会出现取出空值，但缓存中却已有数据，当再一次取数据的时候又能成功取出的现象。这是因为异步执行不影响程序的执行，当执行取缓存数据的时候，数据还未及时存入到缓存中，因此取出空值，当再次取数据时，已有足够的时间让之前的数据存入缓存，因此取值正确。

同步、异步的使用场景：当存储过程不影响数据的展示使用异步已节省各方面的时间，相反情况则使用同步以保证程序业务逻辑的正确

接口用法：

小程序极速实战开发《二十八》wx.storage数据缓存(图1)

wxml

<view class="container">
<button hover-class="but-hover" bindtap="sync">同步存储后获取data1</button>
<button hover-class="but-hover" bindtap="asyn">异步存储后获取data2</button>
<button hover-class="but-hover" bindtap="update">修改缓存data1</button>
<button hover-class="but-hover" bindtap="del_one">删除缓存data1</button>
<button hover-class="but-hover" bindtap="del_all">删除所有缓存数据</button>
<text>data1:{{data1}}</text>
<text>data2:{{data2}}</text>
<text>当前缓存信息:
{{det}}</text>
</view>

var app = getApp()
Page({
data:{
data1:"",
data2:"",
det:""
},
onLoad:function(options){
// 页面初始化获取缓存的数据
var that=this;
this.setData({
data1: wx.getStorageSync('data1')||null,
data2: wx.getStorageSync('data2')||null
})
//获取最新的缓存信息
this.see()
},
sync:function(){
// 同步存储后获取数据
var that=this;
wx.setStorageSync('data1','value1')
wx.getStorage({
key: 'data1',
success: function(res){
that.setData({
data1: wx.getStorageSync('data1')||null,
data2: wx.getStorageSync('data2')||null
})
}
})
this.see()
},
asyn:function(){
// 异步存储后获取数据
var that=this;
wx.setStorage({
key: 'data2',
data: 'value2',
success: function(res){
// success
console.log('success')
}
})
that.setData({
data1: wx.getStorageSync('data1')||null,
data2:wx.getStorageSync('data2')||null
})
this.see()
},
update:function(){
// 修改缓存data1
wx.setStorageSync('data1','new_value1')
this.setData({
data1: wx.getStorageSync('data1')||null,
data2: wx.getStorageSync('data2')||null
})
this.see()
},
del_one:function(){
// 删除一条缓存数据
wx.removeStorageSync('data1')
this.setData({
data1: wx.getStorageSync('data1')||null,
data2: wx.getStorageSync('data2')||null
})
this.see()
},
del_all:function(){
wx.clearStorageSync()
this.setData({
data1: wx.getStorageSync('data1')||null,
data2: wx.getStorageSync('data2')||null
})
this.see()
},
see:function(){
// 查看缓存信息
var that=this;
wx.getStorageInfo({
success: function(res) {
that.setData({
det:'缓存中存在的key:'+res.keys+
'
已缓存的数据大小:'+res.currentSize+'kb
'+
'缓存限制的大小:'+res.currentSize+'kb'
})
}
})
}
})

wxss

page{
height: 100%;
width:100%;
}
.container{
display: flex;
flex-direction: column;
align-items: center;
}
button{
width:500rpx;
margin: 10rpx 0;
}
.but-hover{
background-color: #5CB85C;
}

主要属性：

所有异步方法的参数皆是对象，故异步方法都有共同参数

参数	类型	必填	说明
success	Function	是	接口调用的回调函数,res = {data: key对应的内容}
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

特殊参数说明：

wx.setStorage(OBJECT)、wx.getStorageSync(KEY)
wx.removeStorage(OBJECT)、wx.removeStorageSync(KEY)

参数	类型	必填	说明
key	String	是	本地缓存中的指定的 key

wx.getStorageInfo(OBJECT) 的success返回参数说明

参数	类型	说明
keys	String Array	当前storage中所有的key
currentSize	Number	当前占用的空间大小, 单位kb
limitSize	Number	限制的空间大小，单位kb