Pass localStorage key as prop

nickap · Oct 31, 2022 · 0ad1b2f · 0ad1b2f
1 parent ece07c3
commit 0ad1b2f
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -63,6 +63,7 @@ Your content will get displayed via [Slots](https://vuejs.org/guide/components/s
 | **color** | '#555' | String  | false |
 | **bgroundColor** | '#fefefe' | String  | false |
 | **bdropColor** | 'rgba(0, 0, 0, 0.7)' | String  | false |
+| **LSItemKey** | 'vue-exit-intent' | String  | false |
 
 ### Props Description
 - **repeatAfterHours**  
@@ -101,6 +102,10 @@ Background Color.
 - **bdropColor**  
 BackDrop Color.
 
+- **LSItemKey**  
+Key of Local Storage item.
+You can use a different key to show multiple pop-ups with different behaviour/content.
+
 ### Use it with defaults
 Please add your content in between the opening and closing tag.
 If you don't add your pop-up content, a fallback content will be shown.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-exit-intent",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Vue 3 pop-up that shows up when a user is leaving, or another threshold reached.",
   "author": "nickap <dev.texng@simplelogin.com>",
   "license": "MIT",

diff --git a/src/components/vueExitIntent.vue b/src/components/vueExitIntent.vue
@@ -14,7 +14,8 @@ const props = defineProps({
     type: String,
     required: false,
     default: 'rgba(0, 0, 0, 0.7)'
-  }
+  },
+  LSItemKey: { type: String, required: false, default: 'vue-exit-intent' }
 });
 
 const show = ref(false);
@@ -74,16 +75,16 @@ const isAllowedToShow = () => {
     return true;
   } else {
     /* props.repeatAfterHours is 0 -> Do not show more than once */
-    let alreadyShowed = localStorage.getItem('vue-exit-intent');
+    let alreadyShowed = localStorage.getItem(props.LSItemKey);
     if (alreadyShowed) {
       return false;
     } else return true;
   }
 };
 
 const isLocalStorageExpired = () => {
-  if (localStorage.getItem('vue-exit-intent')) {
-    let oldMillis = parseInt(localStorage.getItem('vue-exit-intent'));
+  if (localStorage.getItem(props.LSItemKey)) {
+    let oldMillis = parseInt(localStorage.getItem(props.LSItemKey));
     let currentMillis = new Date().getTime();
     return currentMillis - oldMillis > props.repeatAfterHours * 1000 * 60 * 60
       ? true
@@ -102,7 +103,7 @@ const closeModal = () => {
 const showModal = () => {
   show.value = true;
   document.body.style.overflowY = 'hidden';
-  localStorage.setItem('vue-exit-intent', JSON.stringify(new Date().getTime()));
+  localStorage.setItem(props.LSItemKey, JSON.stringify(new Date().getTime()));
 };
 </script>