132 lines
2.9 KiB
Vue
132 lines
2.9 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<page-head :title="title"></page-head>
|
||
|
|
<view class="uni-common-mt">
|
||
|
|
<view class="uni-list">
|
||
|
|
<view class="uni-list-cell">
|
||
|
|
<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="btn-setstorage" @tap="setStorage">存储数据</button>
|
||
|
|
<button @tap="getStorage">读取数据</button>
|
||
|
|
<button @tap="clearStorage">清理数据</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
title: 'get/set/clearStorage',
|
||
|
|
key: '',
|
||
|
|
data: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
keyChange: function (e) {
|
||
|
|
this.key = e.detail.value
|
||
|
|
},
|
||
|
|
dataChange: function (e) {
|
||
|
|
this.data = e.detail.value
|
||
|
|
},
|
||
|
|
getStorage: function () {
|
||
|
|
var key = this.key,
|
||
|
|
data = this.data;
|
||
|
|
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: (res) => {
|
||
|
|
uni.showModal({
|
||
|
|
title: '存储数据成功',
|
||
|
|
// #ifndef MP-ALIPAY
|
||
|
|
content: JSON.stringify(res.errMsg),
|
||
|
|
// #endif
|
||
|
|
// #ifdef MP-ALIPAY
|
||
|
|
content: data,
|
||
|
|
// #endif
|
||
|
|
showCancel:false
|
||
|
|
})
|
||
|
|
},
|
||
|
|
fail: () => {
|
||
|
|
uni.showModal({
|
||
|
|
title: '储存数据失败!',
|
||
|
|
showCancel:false
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
clearStorage: function () {
|
||
|
|
uni.clearStorageSync()
|
||
|
|
this.key = '',
|
||
|
|
this.data = ''
|
||
|
|
uni.showModal({
|
||
|
|
title: '清除数据成功',
|
||
|
|
content: ' ',
|
||
|
|
showCancel:false
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.btn-setstorage {
|
||
|
|
background-color: #007aff;
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
</style>
|