微信小程序-详解数据缓存

每个微信小程序都可以有自己的本地缓存，可以通过 wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB。

注意： localStorage 是永久存储的，但是我们不建议将关键信息全部存在 localStorage，以防用户换设备的情况。

wx.setStorage(OBJECT)

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

OBJECT参数说明：

示例代码

wx.setStorage({
 key:"key"
 data:"value"
})

wx.setStorageSync(KEY,DATA)

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

OBJECT参数说明：

示例代码

try {
  wx.setStorageSync('key', 'value')
} catch (e) {
}

wx.getStorage(OBJECT)

从本地缓存中异步获取指定 key 对应的内容。

OBJECT参数说明：

示例代码：

wx.getStorage({
 key: 'key',
 success: function(res) {
   console.log(res.data)
 }
})

wx.getStorageSync(KEY)

从本地缓存中同步获取指定 key 对应的内容。

参数说明：

示例代码：

try {
 var value = wx.getStorageSync('key')
 if (value) {
   // Do something with return value
 }
} catch (e) {
 // Do something when catch error
}

wx.getStorageInfo(OBJECT)

异步获取当前storage的相关信息

OBJECT参数说明：

success返回参数说明：

示例代码：

wx.getStorageInfo({
 success: function(res) {
  console.log(res.keys)
  console.log(res.currentSize)
  console.log(res.limitSize)
 }
})

wx.getStorageInfoSync

同步获取当前storage的相关信息

示例代码：

try {
 var res = wx.getStorageInfoSync()
 console.log(res.keys)
 console.log(res.currentSize)
 console.log(res.limitSize)
} catch (e) {
 // Do something when catch error
}

wx.removeStorage(OBJECT)

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

OBJECT参数说明：

示例代码：

wx.removeStorage({
 key: 'key',
 success: function(res) {
  console.log(res.data)
 }
})

wx.removeStorageSync(KEY)

从本地缓存中同步移除指定 key 。

参数说明：

示例代码：

try {
 wx.removeStorageSync('key')
} catch (e) {
 // Do something when catch error
}

wx.clearStorage()
清理本地数据缓存。

示例代码：

wx.clearStorage()

wx.clearStorageSync()

同步清理本地数据缓存

示例代码：

try {
  wx.clearStorageSync()
} catch(e) {
 // Do something when catch error
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序开发之数据存储 参数传递 数据缓存

    微信小程序开发之数据存储 参数传递 数据缓存

    微信小程序开发内测一个月.数据传递的方式很少.经常遇到页面销毁后回传参数的问题,小程序中并没有类似Android的startActivityForResult的方法,也没有类似广播这样的通讯方式,更没有类似eventbus的轮子可用. 现在已知传递参数的方法只找到三种,先总结下.由于正处于内测阶段,文档也不是很稳定,经常修改,目前尚没有人造轮子. 先上GIF: 1.APP.js 我把常用且不会更改的参数放在APP.js的data里面了.在各个page中都可以拿到var app = getApp(

  • 微信小程序之数据缓存的实例详解

    微信小程序之数据缓存的实例详解

    微信小程序之数据缓存的实例详解 前言: 在H5之前,缓存一般都是用cookie,但是cookie的存储空间太小.于是,H5增加了新的缓存机制,即localstorage 和 sessionstorage,具体的介绍就不在多说.在微信小程序中,数据缓存其实就和localstorage 的原理差不多,所以理解起来并不难.下面我们来一起实现一下. 效果图展示: 我们在index页面存入数字11,然后在跳转到新页面,在将缓存中的11取出渲染到当前页面.具体代码如下: index页面: <span sty

  • 微信小程序-详解数据缓存

    微信小程序-详解数据缓存

    每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置.获取和清理.本地缓存最大为10MB. 注意: localStorage 是永久存储的,但是我们不建议将关键信息全部存在 localStorage,以防用户换设备的情况. wx.setStorage(OBJECT) 将数据存储

  • 微信小程序如何修改本地缓存key中单个数据的详解

    微信小程序如何修改本地缓存key中单个数据的详解

    最近在做教师评教系统,有一个'个人信息'页面中有个编辑修改邮箱的功能,本来想得很简单,结果进坑了,搞了好久才出来. 我想实现的效果是点击下图左侧邮箱,然后进入右侧页面,进行邮箱的修改,点击提交后跳转到左侧页面,同时邮箱也发生改变. 点击'我的'时,我让它从控制台打印出student缓存中传过来的数据,如下: {no: "1635050601", name: "张三", sex: "", email: "123@qq.com",

  • 微信小程序 详解页面跳转与返回并回传数据

    微信小程序 详解页面跳转与返回并回传数据 A页面: .wxml文件 <view class="flex-wrp"> <text style="width: 32%;">选择城市</text> <input style="width: 68%;" type="text" bindtap="city" placeholder="请选择城市" valu

  • 微信小程序 详解Page中data数据操作和函数调用

    微信小程序 详解Page中data数据操作和函数调用 Page() 函数用来注册一个页面.接受一个 object 参数,其指定页面的初始数据.生命周期函数.事件处理函数等. //index.js <pre code_snippet_id="2049407" snippet_file_name="blog_20161214_1_1145312" name="code" class="javascript">Page(

  • 微信小程序详解如何实现付款功能

    微信小程序详解如何实现付款功能

    目录 1 支付场景 2 创建数据源 2.1 商品数据源 2.2 订单数据源 3 创建连接器 4 创建应用 5 功能开发 5.1 首页 5.2 商品详情页 5.3 订单页 总结 1 支付场景 我们梳理一下支付场景是什么样子的,首先可以浏览商品,然后在商品的详情页里进行结算.结算的主要目的是生成订单,订单生成好之后就可以进行支付. 支付其实是先向微信支付提交一个在线订单,订单提交成功之后就可以调用支付接口来拉起支付界面. 拉起支付界面之后我们需要按照提示的金额进行付费,付费成功后我们更新一下订单的状

  • 微信小程序实现写入读取缓存详解

    在小程序中有些需要把数据缓存到Storage中,需要的时候在读取缓存中的数据,在微信小程序中通过setStorage写入数据: wx.setStorage({ key: 'myData', data: res.data.data }) 通过getStorage读取缓存中的数据: var that = this; wx.getStorage({ key: 'myData', success: function (res) { var myData = res.data;//读取key值为myDat

  • 微信小程序-详解微信登陆、微信支付、模板消息

    微信小程序-详解微信登陆、微信支付、模板消息

    微信公众平台近日悄然开始内测微信小程序(微信公众号)功能,引来无数开发者和普通用户关注,微信支付的能力,是随着小程序的发布一并推出的,具有介绍如下: wx.login(OBJECT) 调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的 会话密钥(session_key).用户数据的加解密通讯需要依赖会话密钥完成. OBJECT参数说明: success返回参数说明: 示例代码: //app.js App({ onLaunch: functio

  • 微信小程序 详解下拉加载与上拉刷新实现方法

    微信小程序 详解下拉加载与上拉刷新实现方法

    微信小程序下拉刷新上拉加载的两种实现方法 实现效果图: 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性             属性   类型                           描述 enablePullDownRefresh Boolean 是否开启下拉刷新,详见页面相关事件处理函数. 设置js里onPullDownRefresh和onReachBottom方法 属性    类

  • 微信小程序中网络请求缓存的解决方法

    需求 提交小程序审核时,有一个体验测评,产品让我们根据小程序的体验测评报告去优化小程序. 其中有一项是网络请求的优化,给我们出了很大的难题. 文档中是这样解释的:3分钟以内同一个url请求不出现两次回包大于128KB且一模一样的内容 看到这个问题的时候,首先想到的是在响应头上加上cache-control,经过测试发现小程序并不支持网路请求缓存.搜索发现官方明确答复,小程序不支持网络请求缓存:wx.request不支持http缓存 既然官方不支持网络请求缓存,那只能自己想办法解决这个问题了. 先

  • 微信小程序数据存储与取值详解

    微信小程序数据存储与取值详解

    在小程序开发的过程,经常要需要这个页面输入的数据,在下一个页面中进行取值赋值. 比如: 在A页面input输入框,输入电话号码,点击添加.需要在B页面电话区域中,显示刚刚输入的电话号码. 因为这是两个页面,就需要先存储,再取值.微信小程序提供了数据存储的API,wx.setStorage(OBJECT) 可以将数据存储在本地缓存中指定的 key 中,如果重复会覆盖掉原来该 key 对应的内容. 思路是,在A页面,使用bindinput获取input输入的值,赋值给一个变量(自定义),点击添加按钮

随机推荐