You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by zs...@apache.org on 2018/12/14 04:29:08 UTC
[incubator-weex-site] branch draft updated: Update storage.md
This is an automated email from the ASF dual-hosted git repository.
zshshr pushed a commit to branch draft
in repository https://gitbox.apache.org/repos/asf/incubator-weex-site.git
The following commit(s) were added to refs/heads/draft by this push:
new e962473 Update storage.md
e962473 is described below
commit e96247381b6a117962cebeadab061868e28999c0
Author: zshshr <zh...@gmail.com>
AuthorDate: Fri Dec 14 12:29:04 2018 +0800
Update storage.md
---
docs/docs/modules/storage.md | 210 +++++++++++++++++++++++++++++++++++--------
1 file changed, 172 insertions(+), 38 deletions(-)
diff --git a/docs/docs/modules/storage.md b/docs/docs/modules/storage.md
index cf842d0..2a64999 100644
--- a/docs/docs/modules/storage.md
+++ b/docs/docs/modules/storage.md
@@ -1,41 +1,175 @@
+---
+title: storage
+type: references
+group: Build-in Modules
+order: 9.09
+version: 2.1
+---
+
# storage
-`storage` 是一个在前端比较常用的模块，可以对本地数据进行存储、修改、删除，并且该数据是永久保存的，除非手动清除或者代码清除。但是，`storage` 模块有一个限制就是浏览器端（H5）只能存储小于5M的数据，因为在 H5/Web 端的实现是采用 `HTML5 LocalStorage API`。而 Android 和 iOS 这块是没什么限制的。
-storage 常用在一些被用户经常查询，但是又不频繁更新的数据，比如搜索历史、用户的订单列表等。搜索历史一般情况都是作为本地数据存储的，因此使用 storage 比较合适。而用户订单列表是需要本地存储和服务端器检索配合的场景。当一个用户下单后，会经常查阅个人的订单列表。但是，订单的列表数据不是频繁更新的，往往只有在收到货品时，才更新“已签收”，其余平时的状态是“已发货”。因此，可以使用 `storage` 存储订单列表，可以减少服务器的压力，例如减少 SQL 查询或者缓存的压力。当用户查看订单详情的时候，再更新数据状态。
+<span class="weex-version">v0.7+</span>
+
+## Summary
+
+`storage` is a series of apis, support add, modify and delete stored data.
+
+**Cauction**: There is NO same-origin-policy in weex storage moudle. Any one can access any key, even can change the value. So be careful of your usage.
## API
-### storage.setItem(key, value, callback)
-该方法可以通过键值对的形式将数据存储到本地。同时可以通过该方法，更新已有的数据。
-| 参数 | 说明 | 类型 |
-| ---------- | ------------- | ----- | ----- |
-| key | 要存储的键，不允许是 `""` 或 `null` | string |
-| value | 要存储的值，不允许是 `""` 或 `null` | string |
-| callback | 执行操作成功后的回调<br>`e.result`：表示设置是否成功，如果成功返回 `"success"`<br>`e.data`：`undefined` 表示设置成功，`invalid_param` 表示 key/value 为 `""` 或者 `null` | function(e) |
-
-### storage.getItem(key, callback)
-传入键名返回对应的键值。
-| 参数 | 说明 | 类型 |
-| ---------- | ------------- | ----- | ----- |
-| key | 要获取的值的名称，不允许是 `""` 或 `null` | string |
-| callback | 执行操作成功后的回调<br>`e.result`：表示操作是否成功，如果成功返回 `"success"`<br>`e.data`：获取对应的键值字符串，如果没有找到则返回 `undefined` | function(e) |
-
-### storage.removeItem(key, callback)
-传入一个键名将会删除本地存储中对应的键值。
-| 参数 | 说明 | 类型 |
-| ---------- | ------------- | ----- | ----- |
-| key | 要删除的值的名称，不允许是 `""` 或 `null` | string |
-| callback | 执行操作成功后的回调<br>`e.result`：表示删除是否成功，如果成功返回 `"success"`<br>`e.data`：`undefined` 表示删除成功| function(e) |
-
-### storage.length(callback)
-返回本地存储的数据中所有存储项数量的整数。
-| 参数 | 说明 | 类型 |
-| ---------- | ------------- | ----- | ----- |
-| callback | 执行操作成功后的回调<br>`e.result`：表示操作是否成功，如果成功返回 `"success"`<br>`e.data`：当前已存储项的数量| function(e) |
-
-### storage.getAllKeys(callback)
-返回一个包含全部已存储项键名的数组。
-| 参数 | 说明 | 类型 |
-| ---------- | ------------- | ----- | ----- |
-| callback | 执行操作成功后的回调<br>`e.result`：表示操作是否成功，如果成功返回 `"success"`<br>`e.data`：所有键名组成的数组| function(e) |
-
-## Demo
-[基本用法](http://dotwe.org/vue/71d1dff37c54fa9bafab4d8cbe3d21e3)
\ No newline at end of file
+
+### setItem(key, value, callback)
+
+When passed a key and a value, it will saved into the storage,
+or update the value if the key already exists.
+
+#### Arguments
+
+* `key`*(string)*: the name of the key you want to store. "" or null is not allowed.
+* `value`*(string)*: the name of the value you want to store."" or null is not allowed.
+* `callback`*(object)*: the callback function after executing this action.
+
+### getItem(key, callback)
+
+When passed a key, will return that key's value.
+
+#### Arguments
+
+* `key`*(string)*: the name of the key you want to retrieve the value of."" or null is not allowed.
+* `callback`*(object)*: the callback function after executing this action.
+
+### removeItem(key, callback)
+
+When passed a key, will remove that key and value from the storage.
+
+#### Arguments
+
+* `key`*(string)*: the name of the key you want to remove."" or null is not allowed.
+* `callback`*(object)*: the callback function after executing this action.
+
+##### Example
+
+```javascript
+var storage = weex.requireModule('storage');
+storage.removeItem('foo', function(e) {
+ // callback. 'e' is an object that contains 'result' and 'data'.
+ // e.result will return 'success' or 'failed' according to the executing result.
+ // e.data will always return 'undefined' in this function if success.
+});
+```
+
+### length(callback)
+
+Returns an integer representing the number of key-value items stored in the storage.
+
+#### Arguments
+
+* `callback`*(object)*: the callback function after executing this action.
+
+### getAllKeys(callback)
+
+Returns an array that contains all keys stored in the storage.
+
+#### Arguments
+
+* `callback`*(object)*: the callback function after executing this action.
+
+## Example
+
+```html
+<template>
+ <div class="list">
+ <div class="group center">
+ <div class="panel"><text class="text">{{state}}</text></div>
+ </div>
+ <div class="group">
+ <div class="panel"><text class="text" @click="setItem">set</text></div>
+ <div class="panel"><text class="text" @click="getItem">get</text></div>
+ <div class="panel"><text class="text" @click="removeItem">remove</text></div>
+ <div class="panel"><text class="text" @click="getAll">all</text></div>
+ </div>
+ </div>
+</template>
+
+<script>
+ const storage = weex.requireModule('storage')
+ const modal = weex.requireModule('modal')
+
+ export default {
+ data () {
+ return {
+ keys: '[]',
+ length: 0,
+ state: '----'
+ }
+ },
+ methods: {
+ setItem () {
+ storage.setItem('name', 'Hanks', event => {
+ this.state = 'set success'
+ console.log('set success')
+ })
+ },
+ getItem () {
+ storage.getItem('name', event => {
+ console.log('get value:', event.data)
+ this.state = 'value: ' + event.data
+ })
+ },
+ removeItem () {
+ storage.removeItem('name', event => {
+ console.log('delete value:', event.data)
+ this.state = 'deleted'
+ })
+ },
+ getAll () {
+ storage.getAllKeys(event => {
+ // modal.toast({ message: event.result })
+ if (event.result === 'success') {
+ modal.toast({
+ message: 'props: ' + event.data.join(', ')
+ })
+ }
+ })
+ }
+ }
+ }
+</script>
+
+<style scoped>
+ .panel {
+ height: 100px;
+ flex-direction: column;
+ justify-content: center;
+ border-width: 2px;
+ border-style: solid;
+ border-color: rgb(162, 217, 192);
+ background-color: rgba(162, 217, 192, 0.2);
+ }
+ .group {
+ flex-direction: row;
+ justify-content: space-between;
+ width: 650px;
+ margin-left: 50px;
+ margin-top: 50px;
+ margin-bottom: 50px;
+ }
+ .center {
+ justify-content: center;
+ }
+ .text {
+ font-size: 50px;
+ text-align: center;
+ padding-left: 25px;
+ padding-right: 25px;
+ color: #41B883;
+ }
+ .small {
+ font-size: 32px;
+ padding-left: 35px;
+ padding-right: 35px;
+ color: #41B883;
+ }
+</style>
+```
+
+[try it](http://dotwe.org/vue/3fdd3e2d1646ca41199d80c7be799858)