vue + store2實現未提交信息自動保存


自動保存因意外退出而未來得及提交的注冊信息

前提條件

  • 未提交。提交過的注冊信息不予保存
  • 意外退出。正常退出的注冊信息不予保存

實現方法

  • 保存注冊信息,用store2來做。
    但是,怎么解決另一個用戶想注冊的時候不會恢復上一個用戶的注冊信息呢?
    用sessionStorage,關閉瀏覽器則sessionStorage保存的信息清空
  • 未提交,也就是提交過后的不予保存。定義一個flag, 用戶提交信息並返回ok
    后,置flag為false,在路由離開的鈎子里判斷flag為false則無需保存。
  • 意外退出。其實在路由離開的鈎子里提醒用戶"是否確定離開?",即可以
    避免因意外退出丟失未來得及保存的注冊信息。

總結

所以,我的方案是,①在路由離開鈎子里提醒用戶"是否確定離開?"
②在路由離開鈎子里默默為用戶保存尚未提交的注冊信息,並且用sessionStorage
保存,以防用戶信息穿混。

后記

另一種自動保存的需求出現在編輯郵件、個人簡介等長篇幅的寫內容中,常見
的是自動保存,也就是用定時器保存信息。至於保存在哪里?建議保存在服務端
不建議保存在客戶端。因為是非短時間的寫內容,用戶可能在多平台、多時段
編輯,而且用戶是已登錄的,利於服務端按用戶id進行存儲。

vue-storage

這是一個用vuejs + store2 + bootstrap-vue實現的** 自動保存因意外退出而未來得及提交的注冊信息** 小demo

項目相關資源

GIT地址


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM