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页面都可以进行访问,它们共享本地数据