微信小程序之数据缓存实例-备忘录(7)

  数据缓存在移动端的使用是非常重要的,既可以减少用户的流量支出又可以提高程序的访问速度和用户体验。每个微信小程序都可以有自己的本地缓存,可以通过wx.setStoragewx.setStorageSync)、wx.getStoragewx.getStorageSync)、wx.clearStoragewx.clearStorageSync)可以对本地缓存进行设置、获取和清理。同一个微信用户,同一个小程序 storage 上限为 10MB

    一、 Wx.setStorage(OBJECT)

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

      object参数说明:

    示例代码:

复制代码
wx.setStorage({

  key:"key",

  data:"value"

})
复制代码

 

  • wx.setStorageSync(KEY,DATA)

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

    参数说明:

 

    示例代码:

复制代码
try {

 

    wx.setStorageSync('key', 'value')

 

} catch (e) {    

 

}
复制代码

 

  •  wx.getStorage(OBJECT)

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

      OBJECT参数说明:

    success返回参数说明:

   示例代码:

复制代码
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参数说明:

    示例代码:

复制代码
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

}
复制代码

 

    项目效果:

 

分类:  微信开发
小程序之备忘录开发的源码,微信的react的特性使它很适合用来开发这种单机版简单交互的备忘录。在本示例中,初始时页面只有一个简简单单的欢迎词和文本框,当聚焦文本框开始输入文字,下方出现提交及重置按钮,默认开始时间为当前;点击时间可以重新选择,默认该项目到点前会进行提醒;也可以点绿色开关改成不需要提醒。   页面提交后,下面出现备忘录列表,每行后面有打钩图标用于切换该事项是否已完成、以及X按钮用以删除该事项;当该事项被设为已完成,会跟其他事项有颜色区分。   同时 下面出现一些操作功能,比如切换“显示全部” 以及 “只显示未完成事项”的功能,全部标为已完成、以及删除全部的按钮。   另外当列表存在数据时,下面还有一个按钮保存数据,将当前数据保存到缓存区域,用以下次打开时继续显示个人备忘录状态。   当时间到达有需要提醒的项目前一分钟,或者如果是需要立即开始的当前时间,界面会跳出项目内容,同时播放语音提醒。点击确定表示马上去完成该项目。此时系统会自动将该项目设置为已完成。   个人体会:每个页面的数据绑定(data)是小程序的核心部分,通过setData存入和花括号的读取实现了普通html静态页面没有做到的动态交互;不管是从当前页面提交的表单数据,还是从网络、json文件、api接口读取来的数据在这里交汇并被处理、使用。理解这一点,其他的具体组件/接口等等具体使用方法都是细枝末节了,可以通过查询文档练习掌握。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值