feat: Improve storage and add sessionStorage and webStorage (#98)

* feat: improve accessing storage and added webStorage, sessionStorage

* add tab sync functionality to storage

* Added documentation

* webstorage testing

* added sessionStorage tests

* more tests

* remove comment

* add string typing when using storage

* add image to localStorage.md

.gitignore

@@ -137,4 +137,5 @@ $RECYCLE.BIN/
 
 # Custom rules (everything added below won't be overriden by 'Generate .gitignore File' if you use 'Update' option)
 dist
-temp
+temp
+!docs/.vuepress/public/

CHANGELOG.md

@@ -12,6 +12,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - [Online](<[composable/web](https://pikax.me/vue-composable/composable/web)/online>) - reactive `navigator.onLine` wrapper
 - [PageVisibility](https://pikax.me/vue-composable/composable/web/pageVisibility) - reactive `Page Visibility API`
 - [Language](https://pikax.me/vue-composable/composable/web/language) - reactive `NavigatorLanguage`
+- [WebStorage](composable/misc/webStorage) - Reactive access to `Storage API`, `useLocalStorage` and `useSessionStorage` use this
+- [storage](composable/misc/storage) - uses `localStorage` or on safari private it uses `sessionStorage`
+- [sessionStorage](composable/misc/sessionStorage) - Reactive access to a `sessionStorage`
+
+### Changed
+
+- [localStorage](composable/misc/localStorage) - refractor implementation to `useWebStorage` and added tab sync functionality
 
 ## 1.0.0-dev.4
 

docs/.vuepress/components/LocalStorageExample.vue

@@ -1,28 +1,50 @@
 <template>
   <div>
-    localStorage: {{storage}}
+    localStorage: {{ storage }}
     <p>
-      <b>Check the value in the dev tools: `{{key}}`</b>
+      supported:
+      <b :class="{ green: supported, red: !supported }">{{ supported }}</b>
+    </p>
+    <p>
+      <b>Check the value in the dev tools: `{{ key }}`</b>
     </p>
     <label for="storage">
       <input name="storage" v-model="storage" />
     </label>
+
+    <div>
+      <p>Enable tab sync? <input type="checkbox" v-model="tabSync" /></p>
+      <p v-if="tabSync">
+        Now this tab is listening for changes, please change the storage value
+        in other tab
+      </p>
+    </div>
+    <div>
+      <button @click="remove">Remove</button>
+    </div>
   </div>
 </template>
 
 <script>
 import { useLocalStorage } from "vue-composable";
+import { ref, watch } from "@vue/composition-api";
 export default {
   name: "local-storage-example",
 
   setup() {
     const key = "__vue_localStorage_example";
-    const { storage } = useLocalStorage(key, 1);
+    const tabSync = ref(false);
+    const { supported, storage, setSync, remove } = useLocalStorage(key, 1);
+
+    watch(tabSync, setSync);
 
     return {
       key,
-      storage
+      supported,
+      tabSync,
+      storage,
+      remove
     };
   }
 };
-</script>
+</script>

docs/.vuepress/components/OnlineExample.vue

@@ -21,11 +21,3 @@ export default {
   }
 };
 </script>
-<style>
-.red {
-  color: red;
-}
-.green {
-  color: green;
-}
-</style>

docs/.vuepress/components/SessionStorageExample.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    sessionStorage: {{ storage }}
+    <p>
+      supported:
+      <b :class="{ green: supported, red: !supported }">{{ supported }}</b>
+    </p>
+    <p>
+      <b>Check the value in the dev tools: `{{ key }}`</b>
+    </p>
+    <label for="storage">
+      <input name="storage" v-model="storage" />
+    </label>
+
+    <div>
+      <button @click="remove">Remove</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { useSessionStorage } from "vue-composable";
+import { ref, watch } from "@vue/composition-api";
+export default {
+  name: "session-storage-example",
+
+  setup() {
+    const key = "__vue_sessionStorage_example";
+    const tabSync = ref(false);
+    const { supported, storage, remove } = useSessionStorage(key, 1);
+
+    return {
+      key,
+      supported,
+      tabSync,
+      storage,
+      remove
+    };
+  }
+};
+</script>

docs/.vuepress/components/StorageExample.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    storage: {{ storage }}
+    <p>
+      supported:
+      <b :class="{ green: supported, red: !supported }">{{ supported }}</b>
+    </p>
+    <p>
+      <b>Check the value in the dev tools: `{{ key }}`</b>
+    </p>
+    <label for="storage">
+      <input name="storage" v-model="storage" />
+    </label>
+
+    <div>
+      <p>Sync supported: {{ supportedSync }}</p>
+      <p>Enable tab sync? <input type="checkbox" v-model="tabSync" /></p>
+      <p v-if="tabSync">
+        Now this tab is listening for changes, please change the storage value
+        in other tab
+      </p>
+    </div>
+    <div>
+      <button @click="remove">Remove</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { useLocalStorage, useStorage } from "vue-composable";
+import { ref, watch } from "@vue/composition-api";
+export default {
+  name: "storage-example",
+
+  setup() {
+    const key = "__vue_storage_example";
+    const tabSync = ref(false);
+    const supportedSync = ref(true);
+
+    const { supported, storage, setSync, remove } = useStorage(key, 1);
+
+    watch(tabSync, s => {
+      if (setSync(s) === false) {
+        supportedSync.value = false;
+      }
+    });
+
+    return {
+      key,
+      supported,
+      supportedSync,
+
+      tabSync,
+      storage,
+      remove
+    };
+  }
+};
+</script>

docs/.vuepress/config.js

@@ -171,11 +171,21 @@ module.exports = {
           sidebarDepth: 1,
           collapsable: false,
           children: [
-            ["composable/misc/localStorage", "localStorage"],
             ["composable/misc/matchMedia", "matchMedia"],
             ["composable/misc/breakpoint", "breakpoint"]
           ]
         },
+        {
+          title: "Storage",
+          sidebarDepth: 1,
+          collapsable: false,
+          children: [
+            ["composable/storage/webStorage", "WebStorage"],
+            ["composable/storage/storage", "Storage"],
+            ["composable/storage/localStorage", "localStorage"],
+            ["composable/storage/sessionStorage", "sessionStorage"]
+          ]
+        },
         {
           title: "Pagination",
           collapsable: false,

docs/.vuepress/styles/index.styl

@@ -0,0 +1,7 @@
+
+.red {
+  color: red;
+}
+.green {
+  color: green;
+}

docs/README.md

@@ -54,10 +54,16 @@ Check out the [examples folder](examples) or start hacking on [codesandbox](http
 
 ### MISC
 
-- [localStorage](composable/misc/localStorage) - Reactive access to a `localStorage`
 - [MatchMedia](composable/misc/matchMedia) - reactive `MatchMedia`
 - [Breakpoint](composable/misc/breakpoint) - reactive `breakpoints` based on `window.innerWidth`
 
+### Storage
+
+- [WebStorage](composable/misc/webStorage) - Reactive access to `Storage API`, `useLocalStorage` and `useSessionStorage` use this
+- [storage](composable/misc/storage) - uses `localStorage` or on safari private it uses `sessionStorage`
+- [localStorage](composable/misc/localStorage) - Reactive access to a `localStorage`
+- [sessionStorage](composable/misc/sessionStorage) - Reactive access to a `sessionStorage`
+
 ### Pagination
 
 - [Pagination](composable/pagination/pagination) - Generic reactive pagination controls