use page lifecycle (#424)

* use page lifecycle

* fix eslint

package.json

@@ -75,6 +75,7 @@
     "npm-run-all": "^4.1.3",
     "optimize-css-assets-webpack-plugin": "^5.0.0",
     "p-any": "^1.1.0",
+    "page-lifecycle": "^0.1.1",
     "performance-now": "^2.1.0",
     "pify": "^4.0.0",
     "quick-lru": "^1.1.0",

routes/_store/LocalStorageStore.js

@@ -1,4 +1,8 @@
 import { Store } from 'svelte/store'
+let lifecycle
+if (process.browser) {
+  lifecycle = require('page-lifecycle/dist/lifecycle.mjs').default
+}
 
 const LS = process.browser && localStorage
 
@@ -31,7 +35,12 @@ export class LocalStorageStore extends Store {
       })
     })
     if (process.browser) {
-      window.addEventListener('beforeunload', () => this.save())
+      lifecycle.addEventListener('statechange', e => {
+        if (e.newState === 'passive') {
+          console.log('saving LocalStorageStore...')
+          this.save()
+        }
+      })
     }
   }