weex-25-storage模块

Paste_Image.png

本节学习目标

  • 使用组件storage缓存数据到本地磁盘
  • 使用组件storage从本地磁盘读取数据
  • 如何删除键值对
  • 获取本地存储的键值对数量
  • 获取本地存储的所有键名数组

场景描述

比如我们在应用程序中输入一段文字,这个时候关闭程序,当再次打开后,我们想要看到上次输入的内容,这个需求就需要用到storage组件来实现数据的存储和数据的读取

内容比较简单 我们就开始吧

  • 引入组件
const storage = weex.requireModule('storage')
  • ** 一 数据的存储** API setItem(key, value, callback) 参数

key {string}:要存储的键,不允许是 "" 或 null value {string}:要存储的值,不允许是 "" 或 null callback {function (e)}:执行操作成功后的回调 e.result:表示设置是否成功,如果成功返回 "success" e.data:undefined 表示设置成功,invalid_param 表示 key/value 为 "" 或者 null

注意

1.key 和 value 只支持字符串,如果要存储对象,必须将其转换为字符串 2.我们如果多次缓存同一个key键的值,那么上次的值会被覆盖掉

代码如下

storage.setItem('cache',this.inputValue,res=>{
    if(res.result=='success'){
    // 数据缓存成功
    }
})
  • 二 读取数据

API getItem(key, callback)

参数

key {string}:要获取的值的名称,不允许是 "" 或 null callback {function (e)}:执行操作成功后的回调 e.result:表示设置是否成功,如果成功返回 "success" e.data:获取对应的键值字符串,如果没有找到则返回 undefined

代码

storage.getItem('cache',res=>{
    if(res.result=='success'){
        this.inputValue=res.data
    }
})
  • 三 清除缓存数据 根据键值清除缓存数据 API removeItem(key, callback) 参数

key {string}:要删除的值的名称,不允许是 "" 或 null callback {function (e)}:执行操作成功后的回调. e.result:表示删除是否成功,如果成功返回 "success" e.data:undefined 表示删除成功

代码如下

storage.removeItem('cache',res=>{
    if(res.result=='success'){
        modal.toast({message:'清除完成',duration:1})
    }
})
  • 四 获取存储的键值对数量

API length(callback) 参数

callback {function (e)}:执行操作成功后的回调 e.result:表示设置是否成功,如果成功返回 "success" e.data:当前已存储项的数量

代码

storage.length(res=>{
    if(res.result='success'){
        this.length = res.data
    }
})
  • 五.获取存储的所有键名数组

API: getAllKeys(callback) 参数

callback {function (e)}:执行操作成功后的回调。 e.result:表示设置是否成功,如果成功返回 "success" e.data:所有键名组成的数组

代码

storage.getAllKeys(res=>{
    if(res.result=='success'){
        this.inputValue = res.data.toString()
    }
})

开发过程中的注意点

1.storage 模块有一个限制就是浏览器端(H5)只能存储小于5M的数据,因为在 H5/Web 端的实现是采用 HTML5 LocalStorage API,iOS 和 android 端没有任何限制 2.这个模块存储的数据在同一个应用的任意一个vue页面都可以进行访问,它们共享本地数据

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏积累沉淀

shell脚本学习之必须了解的基础命令

命令历史 history !! 表示执行上一条命令 !n  表示执行历史中第n条命令 !字符串  表示执行命令历史中首次出现该字符串的命令 设置别名:...

1859
来自专栏蓝天

log4j日志文件路径设置

假设有如下标准化的目录结构: $HOME |-- log |-- conf |-- bin |-- lib |-- data jar包放在l...

1163
来自专栏锦小年的博客

python学习笔记5.3-包的创建

包,也可以称为库,是具有很多功能的一个集合体。本文主要介绍如何自己创建一个包,以及介绍一些在包的创建过程中的技巧。 1. 包的创建 本文的例子将使用最复杂的情况...

2678
来自专栏C/C++基础

程序内存布局

C/C++程序为编译后的二进制文件,运行时载入内存,运行时内存分布由代码段、初始化数据段、未初始化数据段、堆和栈构成,如果程序使用了内存映射文件(比如共享库、共...

1571
来自专栏chenssy

【死磕Java并发】—–J.U.C之Condition

在没有Lock之前,我们使用synchronized来控制同步,配合Object的wait()、notify()系列方法可以实现等待/通知模式。在Java SE...

3454
来自专栏Spark学习技巧

Kafka源码系列之如何删除topic

本文依然是以kafka0.8.2.2为例讲解 一,如何删除一个topic 删除一个topic有两个关键点: 1,配置删除参数 delete.topic.enab...

4399
来自专栏IT技术精选文摘

教你如何监控网站URL是否正常

7095
来自专栏三木的博客

Linux shell 程序设计3——命令行程序

1、date:显示、设置系统的日期和时间。 $date 2011年 01月 30日 星期日 14:43:35 CST $date 012309232011 执行...

2076
来自专栏linux、Python学习

Shell的18条常用命令整理

Linux上的文件以.开头的文件被系统视为隐藏文件,仅用ls命令是看不到他们的,而用ls -a除了显示一般文件名外,连隐藏文件也会显示出来。

910
来自专栏用户2442861的专栏

linux动态库和静态库

http://blog.163.com/xychenbaihu@yeah/blog/static/13222965520101023104745738/

4302

扫码关注云+社区

领取腾讯云代金券