From 80a199eb1c5608840af8508379f11c9587b901e0 Mon Sep 17 00:00:00 2001
From: duqingquan <duqingquan@dcloud.io>
Date: Mon, 26 Jun 2023 14:52:21 +0800
Subject: [PATCH] =?UTF-8?q?storage=20=E7=A4=BA=E4=BE=8B=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/API/storage/storage.uvue | 386 +++++++++++++++++++++++----------
 1 file changed, 266 insertions(+), 120 deletions(-)

diff --git a/pages/API/storage/storage.uvue b/pages/API/storage/storage.uvue
index ab60e4e7..7b52e17a 100644
--- a/pages/API/storage/storage.uvue
+++ b/pages/API/storage/storage.uvue
@@ -1,127 +1,273 @@
 <template>
-    <view>
-        <page-head :title="title"></page-head>
-        <view class="uni-common-mt">
-            <view class="uni-list">
-                <view class="uni-list-cell uni-list-cell-line">
-                    <view class="uni-list-cell-left">
-                        <view class="uni-label">key</view>
-                    </view>
-                    <view class="uni-list-cell-db">
-                        <input class="uni-input" type="text" placeholder="请输入key" name="key" :value="key"
-                            @input="keyChange" />
-                    </view>
-                </view>
-                <view class="uni-list-cell">
-                    <view class="uni-list-cell-left">
-                        <view class="uni-label">value</view>
-                    </view>
-                    <view class="uni-list-cell-db">
-                        <input class="uni-input" type="text" placeholder="请输入value" name="data" :value="data"
-                            @input="dataChange" />
-                    </view>
-                </view>
-            </view>
-            <view class="uni-padding-wrap">
-                <view class="uni-btn-v">
-                    <button type="primary" class="uni-btn btn-setstorage" @tap="setStorage">存储数据</button>
-                    <button class="uni-btn" @tap="getStorage">读取数据</button>
-                    <button class="uni-btn" @tap="clearStorage">清理数据</button>
-                </view>
-            </view>
-        </view>
-    </view>
+	<view>
+		<page-head :title="title"></page-head>
+		<view class="uni-common-mt">
+			<view class="uni-list">
+				<view class="uni-list-cell uni-list-cell-line">
+					<view class="uni-list-cell-left">
+						<view class="uni-label">key</view>
+					</view>
+					<view class="uni-list-cell-db">
+						<input class="uni-input" type="text" placeholder="请输入key" name="key" :value="key"
+							@input="keyChange" />
+					</view>
+				</view>
+				<view class="uni-list-cell">
+					<view class="uni-list-cell-left">
+						<view class="uni-label">value</view>
+					</view>
+					<view class="uni-list-cell-db">
+						<input class="uni-input" type="text" placeholder="请输入value" name="data" :value="data"
+							@input="dataChange" />
+					</view>
+				</view>
+			</view>
+			<view class="uni-padding-wrap">
+				
+				<view class="uni-btn-v">
+					<button class="uni-btn" type="primary" @tap="getStorageInfo">获取储存概述-同步</button>
+					<button class="uni-btn" @tap="getStorageInfoSync">获取储存概述-异步</button>
+				</view>
+				<text>{{storageInfo}}</text>
+				<view class="uni-flex uni-row">
+					<button type="default" style="-webkit-flex: 1;flex: 1;" @tap="strMock">填充字符串</button>
+					<button type="default" style="-webkit-flex: 1;flex: 1;" @tap="complexMock">填充复杂对象</button>
+				</view>
+				<view class="uni-flex uni-row">
+					<button type="default" style="-webkit-flex: 1;flex: 1;" @tap="numberMock">填充整型</button>
+					<button type="default" style="-webkit-flex: 1;flex: 1;" @tap="floatMock">填充浮点型</button>
+				</view>
+			</view>
+			<view class="uni-padding-wrap">
+				<view class="uni-btn-v">
+					<button type="primary" class="uni-btn btn-setstorage" @tap="setStorage">存储数据-异步</button>
+					<button class="uni-btn" @tap="getStorage">读取数据-异步</button>
+					<button class="uni-btn" @tap="removeStorage">移除数据-异步</button>
+					<button class="uni-btn" @tap="clearStorage">清理数据-异步</button>
+				</view>
+				
+				<view class="uni-btn-v">
+					<button type="primary" class="uni-btn btn-setstorage" @tap="setStorageSync">存储数据-同步</button>
+					<button class="uni-btn" @tap="getStorageSync">读取数据-同步</button>
+					<button class="uni-btn" @tap="removeStorageSync">移除数据-同步</button>
+					<button class="uni-btn" @tap="clearStorageSync">清理数据-同步</button>
+				</view>
+
+
+			</view>
+		</view>
+	</view>
 </template>
 <script lang="ts">
-    export default {
-        data() {
-            return {
-                title: 'get/set/clearStorage',
-                key: '',
-                data: ''
-            }
-        },
-        methods: {
-            keyChange: function (e : InputEvent) {
-                this.key = e.detail.value
-            },
-            dataChange: function (e : InputEvent) {
-                this.data = e.detail.value
-            },
-            getStorage: function () {
-                var key = this.key;
-                if (key.length == 0) {
-                    uni.showModal({
-                        title: '读取数据失败',
-                        content: "key 不能为空",
-                        showCancel: false
-                    })
-                } else {
-                    uni.getStorage({
-                        key: key,
-                        success: (res) => {
-                            uni.showModal({
-                                title: '读取数据成功',
-                                content: "data: '" + res.data + "'",
-                                showCancel: false
-                            })
-                        },
-                        fail: () => {
-                            uni.showModal({
-                                title: '读取数据失败',
-                                content: "找不到 key 对应的数据",
-                                showCancel: false
-                            })
-                        }
-                    })
-                }
-            },
-            setStorage: function () {
-                var key = this.key
-                var data = this.data
-                if (key.length == 0) {
-                    uni.showModal({
-                        title: '保存数据失败',
-                        content: 'key 不能为空',
-                        showCancel: false
-                    })
-                } else {
-                    uni.setStorage({
-                        key: key,
-                        data: data,
-                        success: () => {
-                            uni.showModal({
-                                title: '存储数据成功',
-                                content: data,
-                                showCancel: false
-                            })
-                        },
-                        fail: () => {
-                            uni.showModal({
-                                title: '储存数据失败!',
-                                showCancel: false
-                            })
-                        }
-                    })
-                }
-            },
-            clearStorage: function () {
-                this.key = ''
-                this.data = ''
-                uni.clearStorageSync()
-                uni.showModal({
-                    title: '清除数据成功',
-                    content: ' ',
-                    showCancel: false
-                })
-            }
-        }
-    }
+	export default {
+		data() {
+			return {
+				title: 'get/set/clearStorage',
+				key: '',
+				data: '' as any,
+				storageInfo: ''
+			}
+		},
+		methods: {
+			getStorageInfo(){
+				uni.getStorageInfo({
+					success: function (res) {
+						this.storageInfo = JSON.stringify(res)
+					}
+				});
+			},
+			getStorageInfoSync(){
+				try {
+					const res = uni.getStorageInfoSync();
+					this.storageInfo = JSON.stringify(res)
+				} catch (e) {
+					// error
+					console.log(e)
+				}
+
+			},
+			strMock() {
+				this.key = "key_" + Math.random();
+				this.data = "测试字符串数据，长度为16个字符"
+			},
+			complexMock() {
+				this.key = "key_" + Math.random();
+				let jsonObj = {
+					'name': '张三',
+					'age': 12,
+					'classMate': [{
+						'id': 1001,
+						'name': '李四'
+					}, {
+						'id': 1002,
+						'name': 'jack ma'
+					}]
+				}
+				this.data = jsonObj
+			},
+			numberMock() {
+				this.key = "key_" + Math.random();
+				this.data = 10011
+			},
+			floatMock() {
+				this.key = "key_" + Math.random();
+				this.data = 3.1415926535893384626
+			},
+
+			keyChange: function (e : InputEvent) {
+				this.key = e.detail.value
+			},
+			dataChange: function (e : InputEvent) {
+				this.data = e.detail.value
+			},
+			getStorage: function () {
+				var key = this.key;
+				if (key.length == 0) {
+					uni.showModal({
+						title: '读取数据失败',
+						content: "key 不能为空",
+						showCancel: false
+					})
+				} else {
+					uni.getStorage({
+						key: key,
+						success: (res) => {
+							uni.showModal({
+								title: '读取数据成功',
+								content: "data: '" + res.data + "'",
+								showCancel: false
+							})
+						},
+						fail: () => {
+							uni.showModal({
+								title: '读取数据失败',
+								content: "找不到 key 对应的数据",
+								showCancel: false
+							})
+						}
+					})
+				}
+			},
+			getStorageSync: function () {
+				var key = this.key;
+				if (key.length == 0) {
+					uni.showModal({
+						title: '读取数据失败',
+						content: "key 不能为空",
+						showCancel: false
+					})
+				} else {
+					let ret = uni.getStorageSync(key)
+					uni.showModal({
+						title: '读取数据成功',
+						content: "data: '" + ret + "'",
+						showCancel: false
+					})
+				}
+			},
+			setStorage: function () {
+				var key = this.key
+				var data = this.data
+				if (key.length == 0) {
+					uni.showModal({
+						title: '保存数据失败',
+						content: 'key 不能为空',
+						showCancel: false
+					})
+				} else {
+					uni.setStorage({
+						key: key,
+						data: data,
+						success: () => {
+							uni.showModal({
+								title: '存储数据成功',
+								showCancel: false
+							})
+						},
+						fail: () => {
+							uni.showModal({
+								title: '储存数据失败!',
+								showCancel: false
+							})
+						}
+					})
+				}
+			},
+			setStorageSync: function () {
+				var key = this.key
+				var data = this.data
+				if (key.length == 0) {
+					uni.showModal({
+						title: '保存数据失败',
+						content: 'key 不能为空',
+						showCancel: false
+					})
+				} else {
+					uni.setStorageSync(key,data)
+					uni.showModal({
+						title: '存储数据成功',
+						showCancel: false
+					})
+				}
+			},
+			removeStorage: function () {
+				uni.removeStorage({
+					key:this.key,
+					success: () => {
+						uni.showModal({
+							title: '移除数据成功',
+							showCancel: false
+						})
+					},
+					fail: () => {
+						uni.showModal({
+							title: '移除数据失败',
+							showCancel: false
+						})
+					}
+				})
+				
+			},
+			removeStorageSync: function () {
+				uni.removeStorageSync(this.key)
+				uni.showModal({
+					title: '移除数据成功',
+					showCancel: false
+				})
+				
+			},
+			clearStorage: function () {
+				this.key = ''
+				this.data = ''
+				uni.clearStorage()
+				uni.showModal({
+					title: '清除数据成功',
+					content: ' ',
+					showCancel: false
+				})
+			},
+			clearStorageSync: function () {
+				this.key = ''
+				this.data = ''
+				uni.clearStorageSync()
+				uni.showModal({
+					title: '清除数据成功',
+					content: ' ',
+					showCancel: false
+				})
+			}
+		}
+	}
 </script>
 
 <style>
-    .btn-setstorage {
-        background-color: #007aff;
-        color: #ffffff;
-    }
+	.btn-setstorage {
+		background-color: #007aff;
+		color: #ffffff;
+	}
+
+	.button-sp-area {
+		flex-direction: row;
+		margin: 0 auto;
+	}
 </style>
\ No newline at end of file
-- 
GitLab