uniapp视频播放历史记录———— uni.getStorage 与 uni.getStorageSync 项目中遇到的坑

视频播放历史记录

使用uni-app框架
我的思路:
明确:用户在退出当前播放页或锁屏时或物理返回键返回时帮用户记录;
1.首先用户退出时我们拿到当前播放视频的唯一标识(例如:vid),还有视频已经播放的时长(uniapp官网有方法)
2.存视频vid和时长的时候需要先做一下判断,原来的缓存中是否有相同vid的视频,如果有保存新的停止时间,如果没有可以直接存入;(uni.setStorage() 会替换上一条缓存信息,所以需要把你要保存的每一条视频信息push到一个数组里面,将这个数组保存在缓存中)

try {
	this.videoStorage = uni.getStorageSync('videoSchedule')
	// 判断缓存中是否存在此视频
	const index = this.videoStorage.findIndex(item => item.vid === this.vid)
	if (index === -1) {
		this.videoStorage.push({
			'vid': this.vid,	//视频唯一标识
			'timeStorage': this.timeStorage,	//用户返回时保存的时间
			'videoUrl': this.videoInfo.src,	//视频播放地址
		})
		uni.setStorage({
			key: 'videoSchedule',
			data: this.videoStorage,
			success: function() {
				console.log('success')
			}
		})
	} else {	//缓存中已有相同视频,改变已看时间替换缓存
		this.videoStorage[index].timeStorage = this.timeStorage
		uni.setStorage({
			key: 'videoSchedule',
			data: this.videoStorage
		})
	}
} catch (error) {
	console.error('缓存失败', error)
}

3.在视频开始播放的时候先从缓存中取出你缓存的信息,然后拿到当前视频的vid,用缓存的信息 Array.findIndex() ,在缓存信息中寻找相同vid的视频信息,如果返回-1说明这个视频没有被缓存过,如果返回值不等于-1,那么就可以取出这条缓存,用缓存的时间替换视频播放的初始时间(uniapp官网video标签的属性)。

try {
	this.videoStorage = uni.getStorageSync('videoSchedule')
	if (this.videoStorage) {
		console.log('videoSchedule', this.videoStorage)
		const videoArr = this.videoStorage
		const index = videoArr.findIndex(item => item.vid === this.vid);
		if (index != -1) {
			console.log('视频时长', this.videoInfo.duration)
			const videoDuration = Number(this.videoInfo.duration)
			const initialTime = Number(videoArr[index].timeStorage)
			console.log('initialTime===>', initialTime)
			if (isNaN(videoDuration) || isNaN(initialTime)) return
			// 时长小于5s或剩余5s结束,下次初始位置开始播放
			if (initialTime + 5 >= videoDuration || initialTime <= 5) {
				this.videoInfo.initialTime = 0
			} else {
				this.videoInfo.initialTime = initialTime
			}
		} else {
			console.log('没找到')
		}
	}
	this.albumStorage = uni.getStorageSync('albumInfo')
	} catch (error) {
		console.log('error', error)
		}

这就是我要说的问题
这里第一行代码,我已开始用的uni.getStorage()去拿缓存,因为他是异步的,所以就先跑后面的代码,而且我后面的处理方法也没有写在success (成功的回调函数)中,导致我不管怎么样findIndex() 永远返回的都是 -1 。最后还好有我朋友指点才想到取缓存的同步和异步的问题才解决了这个bug。
希望大家吸取我的教训

引用中提到的代码使用的是uni.getStorage方法来获取存储在storage中的userName数据,并将其赋值给this.userName。而引用中提到的解决办法是使用箭头函数来避免this指向的问题。通过箭头函数的使用,可以确保this指向的是外部作用域的this,而不是内部函数的this。所以,修改后的代码可以正确地将res.data赋值给this.userName。引用中的代码也是类似的情况,使用箭头函数来确保this指向的正确性。 uni.getStorageuni.getStorageSync的差别在于它们的返回方式不同。uni.getStorage是一个异步方法,它会在获取到数据后通过回调函数的方式返回数据。而uni.getStorageSync是一个同步方法,它会立即返回数据。所以,在使用uni.getStorage时,我们需要通过回调函数来获取数据,而在使用uni.getStorageSync时,我们可以直接获取返回的数据而不需要回调函数。 总结起来,uni.getStorage是异步获取存储数据的方法,而uni.getStorageSync是同步获取存储数据的方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [uniapp uni.getstorage获取的值无法绑定到data的数据](https://blog.csdn.net/weixin_61945023/article/details/129820882)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *3* [【uni-app】在组件mounted中使用uni.getStorage,成功的回调中设置data中的数据不成功,也不报错](https://blog.csdn.net/Sonnenlicht77/article/details/130871708)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值