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

    数据缓存在移动端的使用是非常重要的,既可以减少用户的流量支出又可以提高程序的访问速度和用户体验。每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.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

}

 

    项目效果:

 

微信小程序,前端大梦想(二)的更多相关文章

  1. 微信小程序,前端大梦想(二)

    微信小程序的视图与渲染  今天我们从四个方面来了解小程序:   •组件的基本使用  •数据绑定  •渲染标签  •模板的使用     一.组件的基本使用:  微信小程序为我们的开发提供了丰富的UI组件 ...

  2. 微信小程序,前端大梦想(六)

    微信小程序,前端大梦想(六) 微信小程序之联合百度API实现定位 定位功能对于我们都不陌生,在移动端的应用中更是不可或缺的功能,小程序中也提供了对应的API帮助我们完成定位的实现,但是目前小程序的定位 ...

  3. 微信小程序,前端大梦想(一)

    小程序框架MINA简介       微信公众平台"小程序"具有不是APP胜似APP的效果,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用 ...

  4. 微信小程序前端页面书写

    微信小程序前端页面书写 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 一.数据绑定 1. 普通写法 <view ...

  5. 微信小程序前端样式WXSS书写

    微信小程序前端样式WXSS书写 一. WXSS的简单介绍 WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式. 与 CSS 相比,WXSS 扩展的特性有: ...

  6. 微信小程序《沈航二手书》

    微信小程序<沈航二手书> 0x01. 利益相关者  利益相关者:是指与客户有一定利益关系的个人或组织群体,可能是客户内部的(如雇员),也可能是客户外部的(如供应商或压力群体). 根据相关利 ...

  7. 微信小程序动态生成保存二维码

    起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <view class ...

  8. 微信小程序把玩(十二)text组件

    原文:微信小程序把玩(十二)text组件 通常文本设置要不在wxml中设置,再要不就是通过weml绑定在js中设置文字. wxml <view > <text>我是文本组件&l ...

  9. 关于微信小程序前端Canvas组件教程

    关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 ​ 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...

  10. 微信小程序前端与myeclipse的数据交换过程(SSH)

    这是我个人探究微信小程序前端与后端之间的数据交换的过程,再结合个人所学的SSH框架, 编程工具用myEclipse2014工具.当然,前提是后台的项目要部署到tomcat服务器上才行, 然后总结了从后 ...

随机推荐

  1. links[v1]

    justep core java Spring Boot ui5 template spring Cross-origin resource sharing 统一异常处理 数据库连接池的选择 Drui ...

  2. iview中 ...用法

    1. 2. 3. 4.可以将divs转为数组解构 5. 解构 6.作为函数的参数 7.作为参数遍历

  3. plsql 中如何清除曾经登录过的用户名

    tools(工具)---> preferences(首选项) ---> login history(登录历史) ---> history(历史) ---> 把你想要删除的删除

  4. Bootstrap modal.js 源码分析

    /* ======================================================================== * Bootstrap: modal.js v3 ...

  5. 运维派 企业面试题1 监控MySQL主从同步是否异常

    Linux运维必会的实战编程笔试题(19题) 企业面试题1:(生产实战案例):监控MySQL主从同步是否异常,如果异常,则发送短信或者邮件给管理员.提示:如果没主从同步环境,可以用下面文本放到文件里读 ...

  6. 一篇文章教会你理解Scrapy网络爬虫框架的工作原理和数据采集过程

    今天小编给大家详细的讲解一下Scrapy爬虫框架,希望对大家的学习有帮助. 1.Scrapy爬虫框架 Scrapy是一个使用Python编程语言编写的爬虫框架,任何人都可以根据自己的需求进行修改,并且 ...

  7. tensorflow 问题库

    1.module 'tensorflow.python.ops.nn' has no attribute 'rnn_cell' 将tf.nn.rnn_cell ->tf.contrib.rnn

  8. vue引入iconfont阿里字体图标库以及报错解决

    下载阿里的字体图标库文件,放在\src\assets\font文件夹下面. 安装style-loader,css-loader和file-loader (或url-loader)  ,记得--save ...

  9. ArchLinux dwm的安装和配置

    dwm官网:https://dwm.suckless.org/ dwm是一个简洁的平铺式窗口管理器 配置简单,使用便捷,没有多少依赖,占用内存非常小 总之dwm正合口味 安装方法 首先在官网下载dwm ...

  10. hostid---打印当前主机的十六进制数字标识

    hostid命令用于打印当前主机的十六进制数字标识.是主机的唯一标识,是被用来限时软件的使用权限,不可改变. hostid命令查找到的值是取hostname对应的ip地址.然后把ip地址转换成hex, ...