Weex的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('localData',this.valueList,res=>{
    if(res.result=='success'){
        // 数据缓存成功后的操作
    }
})

​

二、读取数据

API

getItem(key, callback)

参数

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

​

代码：

storage.getItem('localData',res=>{
    if(res.result=='success'){
        // 数据读取成功后的操作
        this.valueList = res.data
    }
})

​

三、清除缓存数据

API

removeItem(key, callback)

参数

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

​

代码：

storage.removeItem('localData',res=>{
    if(res.result=='success'){
        //清除缓存数据后的操作
    }
})

​

四、获取储存的键值对数量

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.valueList = res.data.toString()
    }
})

​

开发中的注意点

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