Paste_Image.png
场景描述
比如我们在应用程序中输入一段文字,这个时候关闭程序,当再次打开后,我们想要看到上次输入的内容,这个需求就需要用到storage组件来实现数据的存储和数据的读取
内容比较简单 我们就开始吧
const storage = weex.requireModule('storage')
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
}
})
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页面都可以进行访问,它们共享本地数据