storage 本地存储

v0.7+

备注:0.7及以上版本可用

storage 是一个在前端比较常用的模块,可以对本地数据进行存储、修改、删除,并且该数据是永久保存的,除非手动清除或者代码清除。但是,storage 模块有一个限制就是浏览器端(H5)只能存储小于5M的数据,因为在 H5/Web 端的实现是采用 HTML5 LocalStorage API。而 Android 和 iOS 这块是没什么限制的。
storage 常用在一些被用户经常查询,但是又不频繁更新的数据,比如搜索历史、用户的订单列表等。搜索历史一般情况都是作为本地数据存储的,因此使用 storage 比较合适。而用户订单列表是需要本地存储和服务端器检索配合的场景。当一个用户下单后,会经常查阅个人的订单列表。但是,订单的列表数据不是频繁更新的,往往只有在收到货品时,才更新“已签收”,其余平时的状态是“已发货”。因此,可以使用 storage 存储订单列表,可以减少服务器的压力,例如减少 SQL 查询或者缓存的压力。当用户查看订单详情的时候,再更新数据状态。

API

storage 提供了一系列的 API 供我们调用。我们只需要引入该模块,然后调用对应的 API 即可。

setItem(key, value, callback)

该方法可以通过键值对的形式将数据存储到本地。同时可以通过该方法,更新已有的数据。

参数

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

这里,对返回值做一个简单的介绍:

e 包含两个属性:e.resulte.data。如果 e.result 返回值是 “success”,则说明成功。e.data 返回 undefined 表示设置成功,返回 invalid_param 表示key/value 为 “” 或者 null。因此,你可以判断两个返回判断是否插入成功。

getItem(key, callback)

传入键名返回对应的键值

参数

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

removeItem(key, callback)

传入一个键名将会删除本地存储中对应的键值

参数

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

length(callback)

返回本地存储的数据中所有存储项数量的整数

参数

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

getAllKeys(callback)

返回一个包含全部已存储项键名的数组

参数

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

示例

  1. <template>
  2. <divclass="list">
  3. <divclass="group center">
  4. <divclass="panel"><textclass="text">{{state}}</text></div>
  5. </div>
  6. <divclass="group">
  7. <divclass="panel"><textclass="text" @click="setItem">set</text></div>
  8. <divclass="panel"><textclass="text" @click="getItem">get</text></div>
  9. <divclass="panel"><textclass="text" @click="removeItem">remove</text></div>
  10. <divclass="panel"><textclass="text" @click="getAll">all</text></div>
  11. </div>
  12. </div>
  13. </template>
  14. <script>
  15. const storage = weex.requireModule('storage')
  16. const modal = weex.requireModule('modal')
  17. exportdefault{
  18. data (){
  19. return{
  20. keys:'[]',
  21. length:0,
  22. state:'----'
  23. }
  24. },
  25. methods:{
  26. setItem (){
  27. storage.setItem('name','Hanks', event =>{
  28. this.state ='set success'
  29. console.log('set success')
  30. })
  31. },
  32. getItem (){
  33. storage.getItem('name', event =>{
  34. console.log('get value:', event.data)
  35. this.state ='value: '+ event.data
  36. })
  37. },
  38. removeItem (){
  39. storage.removeItem('name', event =>{
  40. console.log('delete value:', event.data)
  41. this.state ='deleted'
  42. })
  43. },
  44. getAll (){
  45. storage.getAllKeys(event =>{
  46. // modal.toast({ message: event.result })
  47. if(event.result ==='success'){
  48. modal.toast({
  49. message:'props: '+ event.data.join(', ')
  50. })
  51. }
  52. })
  53. }
  54. }
  55. }
  56. </script>
  57. <stylescoped>
  58. .panel {
  59. height:100px;
  60. flex-direction: column;
  61. justify-content: center;
  62. border-width:2px;
  63. border-style: solid;
  64. border-color: rgb(162,217,192);
  65. background-color: rgba(162,217,192,0.2);
  66. }
  67. .group{
  68. flex-direction: row;
  69. justify-content: space-between;
  70. width:650px;
  71. margin-left:50px;
  72. margin-top:50px;
  73. margin-bottom:50px;
  74. }
  75. .center {
  76. justify-content: center;
  77. }
  78. .text {
  79. font-size:50px;
  80. text-align: center;
  81. padding-left:25px;
  82. padding-right:25px;
  83. color:#41B883;
  84. }
  85. .small {
  86. font-size:32px;
  87. padding-left:35px;
  88. padding-right:35px;
  89. color:#41B883;
  90. }
  91. </style>

try it

其它参考