微信小程序,前端大梦想(二)
微信小程序之数据缓存实例-备忘录
数据缓存在移动端的使用是非常重要的,既可以减少用户的流量支出又可以提高程序的访问速度和用户体验。每个微信小程序都可以有自己的本地缓存,可以通过 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
}

项目效果:


微信小程序,前端大梦想(二)的更多相关文章
- 微信小程序,前端大梦想(二)
微信小程序的视图与渲染 今天我们从四个方面来了解小程序: •组件的基本使用 •数据绑定 •渲染标签 •模板的使用 一.组件的基本使用: 微信小程序为我们的开发提供了丰富的UI组件 ...
- 微信小程序,前端大梦想(六)
微信小程序,前端大梦想(六) 微信小程序之联合百度API实现定位 定位功能对于我们都不陌生,在移动端的应用中更是不可或缺的功能,小程序中也提供了对应的API帮助我们完成定位的实现,但是目前小程序的定位 ...
- 微信小程序,前端大梦想(一)
小程序框架MINA简介 微信公众平台"小程序"具有不是APP胜似APP的效果,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用 ...
- 微信小程序前端页面书写
微信小程序前端页面书写 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 一.数据绑定 1. 普通写法 <view ...
- 微信小程序前端样式WXSS书写
微信小程序前端样式WXSS书写 一. WXSS的简单介绍 WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式. 与 CSS 相比,WXSS 扩展的特性有: ...
- 微信小程序《沈航二手书》
微信小程序<沈航二手书> 0x01. 利益相关者 利益相关者:是指与客户有一定利益关系的个人或组织群体,可能是客户内部的(如雇员),也可能是客户外部的(如供应商或压力群体). 根据相关利 ...
- 微信小程序动态生成保存二维码
起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <view class ...
- 微信小程序把玩(十二)text组件
原文:微信小程序把玩(十二)text组件 通常文本设置要不在wxml中设置,再要不就是通过weml绑定在js中设置文字. wxml <view > <text>我是文本组件&l ...
- 关于微信小程序前端Canvas组件教程
关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...
- 微信小程序前端与myeclipse的数据交换过程(SSH)
这是我个人探究微信小程序前端与后端之间的数据交换的过程,再结合个人所学的SSH框架, 编程工具用myEclipse2014工具.当然,前提是后台的项目要部署到tomcat服务器上才行, 然后总结了从后 ...
随机推荐
- java高效判断素数
java高效判断素数 package solution; public class Prime { // 偶数可以由有两个素数相加得到, 一个偶数可能有多个这样的两个素数, 请寻找到 这样两个素数,让 ...
- js确认框confirm()用法实例详解
先为大家介绍javascript确认框的三种使用方法,具体内容如下 第一种方法:挺好用的,确认以后才能打开下载地址页面.原理也比较清晰.主要用于删除单条信息确认. ? 1 2 3 4 5 6 7 8 ...
- javascript面向对象编程,带你认识封装、继承和多态
原文链接:点我 周末的时候深入的了解了下javascript的面向对象编程思想,收获颇丰,感觉对面向对象编程有了那么一丢丢的了解了~很开森 什么是面向对象编程 先上一张图,可以对面向对象有一个大致的了 ...
- JavaScript笔记(3)
•位操作符 所有的按位操作符的操作数都会被转成补码形式的有符号的32位整数. 运算符 用法 描述 按位与(AND) a & b 对于每一个比特位,只有两个操作数相应的比特位都是1时,结果才为1 ...
- 移动App架构设计
移动App架构设计 本文主要总结了几种经常使用的架构模式, 基本是层层递进的转载请注名出处 http://blog.csdn.net/uxyheaven, 良好的排版在https://github.c ...
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记35 UITextField文本框
本话来介绍UIKit框架中的组件UITextField. UItextField(文本框)和Label看起来看像,可是文本框是能够编辑的.在UI中使用文本框要注意.由于在模拟器上面输入文字是能够使用电 ...
- PHP开发环境&MySQL下载安装及配置流程
PHP开发环境&MySQL下载安装及配置流程 因工作须要,从0開始学PHP,前几天看完视频教程后開始搞开发环境,到今天才好.这里把安装配置流程梳理一下分享出来. 一.概述 要搭建一个开发环境无 ...
- pip报错
You are using pip version 9.0.1, however version 10.0.1 is available.You should consider upgrading v ...
- spring security oauth2 架构---官方
原文地址:https://projects.spring.io/spring-security-oauth/docs/oauth2.html Introduction This is the user ...
- 《读书报告 – Elasticsearch入门 》----Part II 深入搜索(2)
第十三章 全文检索 这一章开始介绍 全文检索 :怎样对全文字段(full-text fields)进行检索以找到相关度最高的文档. 全文检索最重要的两个方面是: 相关度(Relevance) 根据文档 ...