angular6中form表单开启实时保存功能

1、前言

利用localstorage跟redisTemplate一样的原理，先进入编辑或者新增界面，判断是否具有缓存，如果存在缓存，是否覆盖，之后便是定时器，实时将form表单内容存储到网页的缓存之中

2、代码

2.1路由配置信息

 {path: 'gygg-add/:id', component: GyggAddComponent, data: {action:'edit',title: '供应公告', module: 'gsgg', power: 'SHOW', reuse: true }},
    {path: 'gygg-addread/:id', component: GyggAddComponent, data: {action:'view',title: '供应公告', module: 'gsgg', power: 'SHOW', reuse: true }},

2.2

ngOnit中

ngOnInit() {

        /**
         * 缓存处理 判断是否存在缓存信息
         */
        this.pageClassCache(qslsx);
    }

2.3

 /**
     *  根据页面是编辑还是新增功能，设置不同的缓存key:string
     *
     * @param qslsx
     * @return
     * @date 2019/1/17 15:19
     */
    private pageClassCache(qslsx: string) {
        const id = this.route.snapshot.paramMap.get('id');
        this.action = this.route.snapshot.data.action;

        if (this.action === 'edit') {
            this.cacheKey = 'gygg/' + id;
        }
        if (this.action === 'add') {
            this.cacheKey = 'gygg/' + qslsx;
        }
        this.setOrGetGyggByCache();
    }

2.4

/**
     * ngOnInit初始化之后，执行此方法
	 * PS: 如果是新增则直接弹窗/如果是编辑，先请求基本数据，再弹窗
     *
     * @param null
     * @return
     * @date 2019/1/17 15:07
     */
    setOrGetGyggByCache() {
        const id = this.route.snapshot.paramMap.get('id');

        if (id != '' && id != null) {
            //编辑状态
            this.gyggService.getGyggById(id).subscribe(result => {
                if (result.status != 200) {
                    this._utilsList.createMsg('error', '未找到数据！');
                    return;
                }
                let data = result.data;

                this.gyggDTO = data;

                // 检查是否存在缓存 是则弹处回复对话框
                this.askForRecovery();
            });
        } else {
            // 检查是否存在缓存 是则弹处回复对话框
            this.askForRecovery();
        }
    }

2.5

 /**
     * 缓存恢复确认弹出 延迟加载
     */
    askForRecovery() {
        var page = this;
        setTimeout(function () {
            page.checkLocalstorage();
        }, 1000);
    }

2.6

/**
     * 确认框是否恢复缓存
     */
    checkLocalstorage() {
        var page = this;
        //获取缓存
        if (this.action === 'edit' || this.action === 'add') {
            this.storageData = this.cacheList.get(this.cacheKey);

            if (page.storageData.value != null && page.storageData.value != undefined && page.storageData.value != '') {

                this.confirmList.confirm({
                    title: '提示',
                    content: '<b>在草稿箱中找到尚未保存的记录，恢复后将会覆盖本页面信息，是否恢复到本页面？</b>',
                    onOk() {
                        page.recoveryData(page);
                        page.pageTimer();
                    },
                    onCancel() {
                        page.pageTimer();
                    }
                });
            } else {
                page.pageTimer();
                return;
            }
        }
    }


    /**
     * 将缓存中数据放回表单
     */
    recoveryData(page: any) {
        if (page != null && page.storageData != null && page.storageData.value != null
            && page.storageData.value != undefined) {
            page.storageData.subscribe((localData: GyggDTO) => {
             
                this.gygg = localData.gygg;
            });
        }
    };

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

定时缓存

/**
     * 供应公告表单开启定时10s缓存基本信息封装
     * PS:设置缓存时间为10800(一个月)
     *
     * @param null
     * @return
     * @date 2019/1/18 15:23
     */
    setGyggCacheByForm() {
        var page = this;

        setInterval(function () {
            page.gyggDTO.gygg = gygg;

            page.cacheList.set(page.cacheKey, page.gyggDTO, {type: 's', expire: '108000'});

            console.log('新增缓存' + page.cacheKey + '|' + page.gyggDTO);
        }, 10000);
    }