Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6005
Star 91
Fork 164
H
hello uni-app x
提交 80a199eb 编写于 作者: 杜庆泉's avatar 杜庆泉
浏览文件
操作

storage 示例添加

上级 325bca41
隐藏空白更改
内联 并排
Showing with 266 addition and 120 deletion
pages/API/storage/storage.uvue
浏览文件 @ 80a199eb
<template> <template>
<view> <view>
<page-head :title="title"></page-head> <page-head :title="title"></page-head>
<view class="uni-common-mt"> <view class="uni-common-mt">
<view class="uni-list"> <view class="uni-list">
<view class="uni-list-cell uni-list-cell-line"> <view class="uni-list-cell uni-list-cell-line">
<view class="uni-list-cell-left"> <view class="uni-list-cell-left">
<view class="uni-label">key</view> <view class="uni-label">key</view>
</view> </view>
<view class="uni-list-cell-db"> <view class="uni-list-cell-db">
<input class="uni-input" type="text" placeholder="请输入key" name="key" :value="key" <input class="uni-input" type="text" placeholder="请输入key" name="key" :value="key"
@input="keyChange" /> @input="keyChange" />
</view> </view>
</view> </view>
<view class="uni-list-cell"> <view class="uni-list-cell">
<view class="uni-list-cell-left"> <view class="uni-list-cell-left">
<view class="uni-label">value</view> <view class="uni-label">value</view>
</view> </view>
<view class="uni-list-cell-db"> <view class="uni-list-cell-db">
<input class="uni-input" type="text" placeholder="请输入value" name="data" :value="data" <input class="uni-input" type="text" placeholder="请输入value" name="data" :value="data"
@input="dataChange" /> @input="dataChange" />
</view> </view>
</view> </view>
</view> </view>
<view class="uni-padding-wrap"> <view class="uni-padding-wrap">
<view class="uni-btn-v">
<button type="primary" class="uni-btn btn-setstorage" @tap="setStorage">存储数据</button> <view class="uni-btn-v">
<button class="uni-btn" @tap="getStorage">读取数据</button> <button class="uni-btn" type="primary" @tap="getStorageInfo">获取储存概述-同步</button>
<button class="uni-btn" @tap="clearStorage">清理数据</button> <button class="uni-btn" @tap="getStorageInfoSync">获取储存概述-异步</button>
</view> </view>
</view> <text>{{storageInfo}}</text>
</view> <view class="uni-flex uni-row">
</view> <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> </template>
<script lang="ts"> <script lang="ts">
export default { export default {
data() { data() {
return { return {
title: 'get/set/clearStorage', title: 'get/set/clearStorage',
key: '', key: '',
data: '' data: '' as any,
} storageInfo: ''
}, }
methods: { },
keyChange: function (e : InputEvent) { methods: {
this.key = e.detail.value getStorageInfo(){
}, uni.getStorageInfo({
dataChange: function (e : InputEvent) { success: function (res) {
this.data = e.detail.value this.storageInfo = JSON.stringify(res)
}, }
getStorage: function () { });
var key = this.key; },
if (key.length == 0) { getStorageInfoSync(){
uni.showModal({ try {
title: '读取数据失败', const res = uni.getStorageInfoSync();
content: "key 不能为空", this.storageInfo = JSON.stringify(res)
showCancel: false } catch (e) {
}) // error
} else { console.log(e)
uni.getStorage({ }
key: key,
success: (res) => { },
uni.showModal({ strMock() {
title: '读取数据成功', this.key = "key_" + Math.random();
content: "data: '" + res.data + "'", this.data = "测试字符串数据，长度为16个字符"
showCancel: false },
}) complexMock() {
}, this.key = "key_" + Math.random();
fail: () => { let jsonObj = {
uni.showModal({ 'name': '张三',
title: '读取数据失败', 'age': 12,
content: "找不到 key 对应的数据", 'classMate': [{
showCancel: false 'id': 1001,
}) 'name': '李四'
} }, {
}) 'id': 1002,
} 'name': 'jack ma'
}, }]
setStorage: function () { }
var key = this.key this.data = jsonObj
var data = this.data },
if (key.length == 0) { numberMock() {
uni.showModal({ this.key = "key_" + Math.random();
title: '保存数据失败', this.data = 10011
content: 'key 不能为空', },
showCancel: false floatMock() {
}) this.key = "key_" + Math.random();
} else { this.data = 3.1415926535893384626
uni.setStorage({ },
key: key,
data: data, keyChange: function (e : InputEvent) {
success: () => { this.key = e.detail.value
uni.showModal({ },
title: '存储数据成功', dataChange: function (e : InputEvent) {
content: data, this.data = e.detail.value
showCancel: false },
}) getStorage: function () {
}, var key = this.key;
fail: () => { if (key.length == 0) {
uni.showModal({ uni.showModal({
title: '储存数据失败!', title: '读取数据失败',
showCancel: false content: "key 不能为空",
}) showCancel: false
} })
}) } else {
} uni.getStorage({
}, key: key,
clearStorage: function () { success: (res) => {
this.key = '' uni.showModal({
this.data = '' title: '读取数据成功',
uni.clearStorageSync() content: "data: '" + res.data + "'",
uni.showModal({ showCancel: false
title: '清除数据成功', })
content: ' ', },
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> </script>
<style> <style>
.btn-setstorage { .btn-setstorage {
background-color: #007aff; background-color: #007aff;
color: #ffffff; color: #ffffff;
} }
.button-sp-area {
flex-direction: row;
margin: 0 auto;
}
</style> </style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或