• storage 本地存储
    • API
      • setItem(key, value, callback)
        • 参数
      • getItem(key, callback)
        • 参数
      • removeItem(key, callback)
        • 参数
      • length(callback)
        • 参数
      • getAllKeys(callback)
        • 参数
    • 示例
    • 其它参考

    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.data：undefined 表示设置成功，invalid_param 表示 key/value 为 "" 或者 null

    这里，对返回值做一个简单的介绍：

    e 包含两个属性：e.result 和 e.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.data：undefined 表示删除成功

    length(callback)

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

    参数

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

    getAllKeys(callback)

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

    参数

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

    示例

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

    try it

    其它参考

    • W3school: html5 localStorage
    • storage 模块完整的 Demo