feat: 添加刷新倒计时记录不丢失

docs/keep-in-session.md

@@ -0,0 +1,19 @@
+```vue
+<template>
+  <div>
+    <count-down :seconds="59" :hours="1" keep-in-session="my_keep" ref="cd" />
+    <button @click="onClick('start')">start</button>
+    <button @click="onClick('pause')">pause</button>
+    <button @click="onClick('reset')">reset</button>
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    onClick(m) {
+      this.$refs.cd[m]()
+    }
+  },
+}
+</script>
+```

src/count-down.vue

@@ -59,6 +59,13 @@ export default {
     format: {
       type: String,
       default: ''
+    },
+
+    /**
+     * keep countdowm time in session
+     */
+    keepInSession: {
+      type: String
     }
   },
   data() {
@@ -96,6 +103,20 @@ export default {
   },
   mounted() {
     if (this.autoplay) this.start()
+    window.addEventListener('unload', this.setSession)
+    let session = sessionStorage.getItem(this.keepInSession)
+    if (session) {
+      session = JSON.parse(session)
+      const mountTime = session.rafId
+        ? Number(new Date()) - session.unloadTime
+        : 0
+      this.elapsed = this.time - (session.countdown - mountTime)
+    }
+  },
+  beforeDestroy() {
+    cancelAnimationFrame(this.rafId)
+    this.setSession()
+    window.removeEventListener('unload', this.setSession)
   },
   methods: {
     /**
@@ -115,6 +136,7 @@ export default {
             /**
              * 计时结束事件
              */
+            this.clearSession()
             this.$emit('finish')
           }
         })
@@ -136,6 +158,21 @@ export default {
     reset() {
       this.pause()
       this.elapsed = 0
+    },
+    setSession() {
+      if (this.keepInSession) {
+        sessionStorage.setItem(
+          this.keepInSession,
+          JSON.stringify({
+            countdown: this.countdown,
+            unloadTime: Number(new Date()),
+            rafId: this.rafId
+          })
+        )
+      }
+    },
+    clearSession() {
+      sessionStorage.removeItem(this.keepInSession)
     }
   }
 }