微信小程序怎么进行数据缓存

您好！很高兴能为您解答， 在微信小程序中，数据缓存其实就和localstorage 的原理差不多，所以理解起来并不难。下面我们来一起实现一下。

效果图展示：

我们在index页面存入数字11，然后在跳转到新页面，在将缓存中的11取出渲染到当前页面。具体代码如下：

index页面：

<span style="font-size:24px;">

<view class="btn-area">

<navigator url="/navigator/navigatortitle=我是navi">跳转到新的页面post情求</navigator>

<navigator url="/redirect/redirecttitle=我是red" redirect>跳转到当前页面</navigator>

</view>

</span>

<view>

<input style="border:2rpx solid red" placeholder="输入信息" bindinput="getInput" />

<button style="border:2rpx solid yellow" bindtap="saveInput">存入</button>

</view>1234567891012345678910

index的js：

//indexjs

//获取应用实例

var app = getApp()

Page({

data: {

storage:''

},

onLoad: function () {

var that = this

//获取输入值

getInput:function(e){

thissetData({

storage:edetailvalue

})

},

//存储输入值

saveInput:function(){

wxsetStorageSync('storage', thisdatastorage)

}

})

12345678910111213141516171819202122231234567891011121314151617181920212223

跳转页面：

<view>从存储中得到的数据:{{storage}}</view>11

跳转页面的js：

var app = getApp();

var that;

Page( {

data: {

storage:''

},

onLoad: function(options) {

that = this;

//获取存储信息

wxgetStorage({

key: 'storage',

success: function(res){

// success

thatsetData({

storage:resdata

})

}

})

}

})

微信小程序的编写中，涉及到有些业务场景需要将数据缓存到本地，则微信小程序api提供了两个接口函数，

wxsetStorage可以将数据缓存在本地指定的key中，如果本地缓存已经存在指定的key，则会覆盖该key对应的内容，这是一个异步的接口，在调用时会涉及到成功，失败，完成三个状态，

与wxsetStorage唯一不同的就是wxsetStorageSync是同步进行的，所以不会涉及到成功，失败，完成等回调，但是在使用时需要使用trycatch来捕获异常；

现在编写一个将字符串缓存本地的例子

编译项目，点击缓存按钮：

现在改变缓存的内容，但是缓存的key保持不变

可以看到第二次的内容把第一次覆盖了。

将内容缓存到本地之后，将其从本地提取展示出来，则可是使用微信小程序api提供的两个接口：wxgetStorageInfo(Object object)，wxgetStorageSync(string key)，与缓存同样，读取缓存也分同步和异步；

我们将刚刚存储到本地的数据展示到页面上：

编译项目，点击按钮获取缓存数据并将其展示到页面上。

完成了本地数据的缓存，获取，则接下来就是关于缓存数据的清除，同样微信小程序api也提供了可使用的接口，

至此微信小程序本地保存数据就此结束！

微信小程序里面的本地缓存

wxsetStorage（wxsetStorageSync）、wxgetStorage（wxgetStorageSync）、wxclearStorage（wxclearStorageSync）

localStorage ：是永久存储，以用户维度隔离，同一台设备上，A 用户无法读取到 B 用户的数据。

在小程序中无 Sync 结尾的本地缓存中，都为 异步缓存

wxsetStorage（object）

参数object说明

控制台

表示储存成功

wxgetStorage（object）

示例

这个key值就是先前setStorage的命名key，证明指定获取那个缓存中的数据

wxclearStorage(object)

清理本地数据缓存

将之前储存在Storage中的数据清空。适用于退出登录后登录信息的清除

wxgetStorageInfo(object)

异步获取当前storage的相关信息（ 当前小程序里面所有的storage的储存信息 ）

参数说明

执行结果

wxremoveStorage(OBJECT)

从本地缓存中异步移除指定 key值

获取当前data值时将报错undefined

执行结果

以上就是关于微信小程序怎么进行数据缓存全部的内容，包括:微信小程序怎么进行数据缓存、微信小程序入门（七）：缓存数据-单条数据、缓存问题之异步处理（微信小程序）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！