Skip to content

Commit 2618f52

Browse files
pikaxpikax
authored
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
1 parent a48af30 commit 2618f52

31 files changed

+1316
-343
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,4 +137,5 @@ $RECYCLE.BIN/
137137

138138
# Custom rules (everything added below won't be overriden by 'Generate .gitignore File' if you use 'Update' option)
139139
dist
140-
temp
140+
temp
141+
!docs/.vuepress/public/

‎CHANGELOG.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
1212
- [Online](<[composable/web](https://pikax.me/vue-composable/composable/web)/online>) - reactive `navigator.onLine` wrapper
1313
- [PageVisibility](https://pikax.me/vue-composable/composable/web/pageVisibility) - reactive `Page Visibility API`
1414
- [Language](https://pikax.me/vue-composable/composable/web/language) - reactive `NavigatorLanguage`
15+
- [WebStorage](composable/misc/webStorage) - Reactive access to `Storage API`, `useLocalStorage` and `useSessionStorage` use this
16+
- [storage](composable/misc/storage) - uses `localStorage` or on safari private it uses `sessionStorage`
17+
- [sessionStorage](composable/misc/sessionStorage) - Reactive access to a `sessionStorage`
18+
19+
### Changed
20+
21+
- [localStorage](composable/misc/localStorage) - refractor implementation to `useWebStorage` and added tab sync functionality
1522

1623
## 1.0.0-dev.4
1724

‎docs/.vuepress/components/LocalStorageExample.vue

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,50 @@
11
<template>
22
<div>
3-
localStorage: {{storage}}
3+
localStorage: {{ storage }}
44
<p>
5-
<b>Check the value in the dev tools: `{{key}}`</b>
5+
supported:
6+
<b :class="{ green: supported, red: !supported }">{{ supported }}</b>
7+
</p>
8+
<p>
9+
<b>Check the value in the dev tools: `{{ key }}`</b>
610
</p>
711
<label for="storage">
812
<input name="storage" v-model="storage" />
913
</label>
14+
15+
<div>
16+
<p>Enable tab sync? <input type="checkbox" v-model="tabSync" /></p>
17+
<p v-if="tabSync">
18+
Now this tab is listening for changes, please change the storage value
19+
in other tab
20+
</p>
21+
</div>
22+
<div>
23+
<button @click="remove">Remove</button>
24+
</div>
1025
</div>
1126
</template>
1227

1328
<script>
1429
import { useLocalStorage } from "vue-composable";
30+
import { ref, watch } from "@vue/composition-api";
1531
export default {
1632
name: "local-storage-example",
1733
1834
setup() {
1935
const key = "__vue_localStorage_example";
20-
const { storage } = useLocalStorage(key, 1);
36+
const tabSync = ref(false);
37+
const { supported, storage, setSync, remove } = useLocalStorage(key, 1);
38+
39+
watch(tabSync, setSync);
2140
2241
return {
2342
key,
24-
storage
43+
supported,
44+
tabSync,
45+
storage,
46+
remove
2547
};
2648
}
2749
};
28-
</script>
50+
</script>

‎docs/.vuepress/components/OnlineExample.vue

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,3 @@ export default {
2121
}
2222
};
2323
</script>
24-
<style>
25-
.red {
26-
color: red;
27-
}
28-
.green {
29-
color: green;
30-
}
31-
</style>

‎docs/.vuepress/components/SessionStorageExample.vue

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<div>
3+
sessionStorage: {{ storage }}
4+
<p>
5+
supported:
6+
<b :class="{ green: supported, red: !supported }">{{ supported }}</b>
7+
</p>
8+
<p>
9+
<b>Check the value in the dev tools: `{{ key }}`</b>
10+
</p>
11+
<label for="storage">
12+
<input name="storage" v-model="storage" />
13+
</label>
14+
15+
<div>
16+
<button @click="remove">Remove</button>
17+
</div>
18+
</div>
19+
</template>
20+
21+
<script>
22+
import { useSessionStorage } from "vue-composable";
23+
import { ref, watch } from "@vue/composition-api";
24+
export default {
25+
name: "session-storage-example",
26+
27+
setup() {
28+
const key = "__vue_sessionStorage_example";
29+
const tabSync = ref(false);
30+
const { supported, storage, remove } = useSessionStorage(key, 1);
31+
32+
return {
33+
key,
34+
supported,
35+
tabSync,
36+
storage,
37+
remove
38+
};
39+
}
40+
};
41+
</script>

‎docs/.vuepress/components/StorageExample.vue

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<div>
3+
storage: {{ storage }}
4+
<p>
5+
supported:
6+
<b :class="{ green: supported, red: !supported }">{{ supported }}</b>
7+
</p>
8+
<p>
9+
<b>Check the value in the dev tools: `{{ key }}`</b>
10+
</p>
11+
<label for="storage">
12+
<input name="storage" v-model="storage" />
13+
</label>
14+
15+
<div>
16+
<p>Sync supported: {{ supportedSync }}</p>
17+
<p>Enable tab sync? <input type="checkbox" v-model="tabSync" /></p>
18+
<p v-if="tabSync">
19+
Now this tab is listening for changes, please change the storage value
20+
in other tab
21+
</p>
22+
</div>
23+
<div>
24+
<button @click="remove">Remove</button>
25+
</div>
26+
</div>
27+
</template>
28+
29+
<script>
30+
import { useLocalStorage, useStorage } from "vue-composable";
31+
import { ref, watch } from "@vue/composition-api";
32+
export default {
33+
name: "storage-example",
34+
35+
setup() {
36+
const key = "__vue_storage_example";
37+
const tabSync = ref(false);
38+
const supportedSync = ref(true);
39+
40+
const { supported, storage, setSync, remove } = useStorage(key, 1);
41+
42+
watch(tabSync, s => {
43+
if (setSync(s) === false) {
44+
supportedSync.value = false;
45+
}
46+
});
47+
48+
return {
49+
key,
50+
supported,
51+
supportedSync,
52+
53+
tabSync,
54+
storage,
55+
remove
56+
};
57+
}
58+
};
59+
</script>

‎docs/.vuepress/config.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,11 +171,21 @@ module.exports = {
171171
sidebarDepth: 1,
172172
collapsable: false,
173173
children: [
174-
["composable/misc/localStorage", "localStorage"],
175174
["composable/misc/matchMedia", "matchMedia"],
176175
["composable/misc/breakpoint", "breakpoint"]
177176
]
178177
},
178+
{
179+
title: "Storage",
180+
sidebarDepth: 1,
181+
collapsable: false,
182+
children: [
183+
["composable/storage/webStorage", "WebStorage"],
184+
["composable/storage/storage", "Storage"],
185+
["composable/storage/localStorage", "localStorage"],
186+
["composable/storage/sessionStorage", "sessionStorage"]
187+
]
188+
},
179189
{
180190
title: "Pagination",
181191
collapsable: false,

‎docs/.vuepress/public/localStorage.gif

266 KB
Loading

‎docs/.vuepress/styles/index.styl

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
2+
.red {
3+
color: red;
4+
}
5+
.green {
6+
color: green;
7+
}

‎docs/README.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,16 @@ Check out the [examples folder](examples) or start hacking on [codesandbox](http
5454

5555
### MISC
5656

57-
- [localStorage](composable/misc/localStorage) - Reactive access to a `localStorage`
5857
- [MatchMedia](composable/misc/matchMedia) - reactive `MatchMedia`
5958
- [Breakpoint](composable/misc/breakpoint) - reactive `breakpoints` based on `window.innerWidth`
6059

60+
### Storage
61+
62+
- [WebStorage](composable/misc/webStorage) - Reactive access to `Storage API`, `useLocalStorage` and `useSessionStorage` use this
63+
- [storage](composable/misc/storage) - uses `localStorage` or on safari private it uses `sessionStorage`
64+
- [localStorage](composable/misc/localStorage) - Reactive access to a `localStorage`
65+
- [sessionStorage](composable/misc/sessionStorage) - Reactive access to a `sessionStorage`
66+
6167
### Pagination
6268

6369
- [Pagination](composable/pagination/pagination) - Generic reactive pagination controls

‎docs/composable/misc/localStorage.md

Lines changed: 0 additions & 71 deletions
This file was deleted.

0 commit comments

Comments
 (0)