09 保存草稿功能开发（涉及返回监听事件+本地缓存操作）

09 保存草稿功能开发（涉及返回监听事件+本地缓存操作）

一 完成保存草稿功能

思路

1 监听并且编辑后退事件,当有内容的时候 返回值为true会阻止默认后退行为

2 当有内容的时候（保存选项）把需要保存的数据存储到本地缓存里面，手动执行型返回操作。

3 当有内容的时候（不保存选项）如果不保存清除本地缓存（因为有可能上一次保存了，这一次不想保存），手动执行返回操作。

4 手动设置backtag开关优化每次都提问是否保存（当内容为空的时候无需提问）

1 监听并且编辑后退事件

onBackPress(){
			if ((this.content!='' || this.imageList.length >0) && this.backTag){
				// 异步的
				uni.showModal({
					content:'是否要保存为草稿？',
					showCancel:true,
					
					cancelText:'不保存',
					confirmText:'保存',
					success: (res) => {
						// 点击确认
						if (res.confirm) {
							// 保存到本地缓存。
							this.store()
						}else { // 点击取消，清除本地缓存
							uni.removeStorage({
								key:"add-input"
							})
							
						}
						
						// 手动执行返回
						uni.navigateBack({
							delta:1
						})
					}	,
					
				})
				// 到这里相当于提示框已经出现过或者将要出现了。第二次阻止后退就不应该了
				this.backTag = false
				return true // 返回true阻止默认行为
			}
			
		},
      
      
// ps:methods下的
      store(){
				let obj = {
					content:this.content,
					imageList:this.imageList
				}
				// 异步新增本地缓存。
				uni.setStorage({
					key:'add-input',
					data:JSON.stringify(obj)
				})
			},