uniapp-接口学习【数据存储-未1(下班前进行重点内容的修改概括)】

在uniapp的谷歌h5中无程序:推送,语音,支付,分享,登录

e.target.value
先弄清楚e.target指向哪个元素,然后看看这个元素的value属性的值就可以得到了。初学者一般会把e.target和this弄混,搞不懂这两个具体指向哪个元素。简单来说,this就是指向当前事件所绑定的元素,而e.target指向事件执行时鼠标所点击区域的那个元素。容易搞不懂的地方是,初学者会认为当前事件所绑定的元素不就是鼠标所点击的那个元素嘛,这时候就要看看时间绑定的元素内部有没有子元素了,如果有子元素的话e.target指向这个子元素,如果没有,e.target和this都指向事件所绑定的元素。

每次触发DOM事件时会产生一个事件对象(也称event对象),此处的参数e接收事件对象。而事件对象也有很多属性和方法,其中target属性是获取触发事件对象的目标,也就是绑定事件的元素,e.target表示该DOM元素,然后在获取其相应的属性值。

例如:

$(’.target1’).change(function(e) {

    $("#result").html(e.target.value)

});

e.target就等价于$(‘target1’)

故e.target.value就等价于$(‘target1’).val()

<template>
	<view>
		<view>
			<view>key</view>
			<view >
				<!--
				 @input:当键盘输入时,触发input事件,event.detail = {value} 
				 :value="key" 输入文本框内容
				-->
				<input type="text" placeholder="请输入key" name="key" :value="key" @input="keyChange">
			</view>
		</view>
		
		<view>
			<view>value</view>
			<view>
				<input type="text" placeholder="请输入value" name="data" :value="data" @input="dataChange">
			</view>
		</view>
		
		<view>
			<button type="primary" @tap="setStorage">存储数据</button>
			<button @tap="getStorage">读取</button>
			<button @tap="clearStorage">清空</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				key: '',
				data: ''
			}
		},
		methods: {
			// e.接受事件的对象
			//target获取触发事件的对象目标
			keyChange: function (e) {
				this.key = e.target.value
			},
			dataChange: function (e) {
				this.data = e.target.value
			},
			// 存储数据
			setStorage: function () {
				var key = this.key
				var data = this.data
				if (key.length === 0) {
					uni.showModal({
						title: '保存数据失败',
						content: 'key 不能为空',
						showCancel:false
					})
				} else {
					// 重点
					//uni.setStorage(OBJECT)
					// 将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口。
					uni.setStorage({
						key: key,
						data: data,
						success: (res) => {
							uni.showModal({
								title: '存储数据成功',
								content: ' ',
								showCancel:false
							})
						},
						fail: () => {
							uni.showModal({
								title: '储存数据失败!',
								showCancel:false
							})
						}
					})
				}
			},
			getStorage:function() {
				var key=this.key,
					data=this.data;
				if(key.length === 0){
					// uni.showModal(OBJECT)显示模态弹窗,类似于标准 html 的消息框:alert、confirm。
					uni.showModal({
						title:'读取数据失败',
						content:'key 不能为空',
						// 是否显示取消按钮,默认为 true
						showCancel:false
					})
				}else {
					// 如果key不等于0则做一个存储功能
					//uni.getStorage(OBJECT)
					// 从本地缓存中异步获取指定 key 对应的内容
					// OBJECT 参数说明。
					//key	String	是	本地缓存中的指定的 key
					// success	Function	是	接口调用的回调函数,res = {data: key对应的内容}
					// fail	Function	否	接口调用失败的回调函数
					// complete	Function	否	接口调用结束的回调函数(调用成功、失败都会执行)
					uni.getStorage({
						key:key,
						// data:key值对应的内容
						success:(res) =>{
							uni.showModal({
								title:'读取数据成功',
								content:"data:'"+res.data+"'",
								showCancel:false
							})
						},
						fail:()=>{
							uni.showModal({
								title:'读取数据失败',
								content:"找不到key对应的数据",
								showCancel:false
							})
						}
					});
					
				}
			},
			clearStorage:function() {
				// 同步清理本地数据缓存。
				// uni.clearStorageSync()
				this.key='',
				this.data=''
				uni.showModal({
					title:'清除数据成功',
					content:'',
					showCancel:false
				})
			}
		}
	}
</script>
 

<style>
	
</style>

猜你喜欢

转载自blog.csdn.net/qq_43239475/article/details/87349773