🚀 useLocalStorage hooks and test added

Author: Abdulnasır Olcan

example/vue3/src/App.vue

@@ -1,7 +1,8 @@
 <template>
   <nav>
-    <router-link class="router-list" to="/" active-class="active"
-      >useStringCase</router-link
+    <router-link class="router-list" to="/" active-class="active">useStringCase</router-link>
+    <router-link class="router-list" to="/use-local-storage-hook" active-class="active"
+      >useLocalStorage</router-link
     >
     <router-link class="router-list" to="/use-state-hook" active-class="active"
       >useState</router-link

example/vue3/src/components/useLocalStorage.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { useLocalStorage } from 'vue3-use-hooks';
+const { value, remove } = useLocalStorage('test', 1);
+</script>
+
+<template>
+  <div>
+    <p><b>Value is: </b> {{ value }}</p>
+    <button class="fourth" @click="value = '2'">Change</button>
+    <button class="first" @click="remove">Remove</button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+$green: #2ecc71;
+$red: #e74c3c;
+$blue: #3498db;
+$yellow: #f1c40f;
+$purple: #8e44ad;
+$turquoise: #1abc9c;
+
+p {
+  background-color: #f4f4f4;
+  border: 1px solid #ddd;
+  border-left: 0.3rem solid #42b983;
+  color: #666;
+  font-family: monospace;
+  padding: 1em 1.5em;
+  display: block;
+}
+
+button {
+  box-sizing: border-box;
+  appearance: none;
+  background-color: transparent;
+  border: 2px solid $red;
+  border-radius: 0.6em;
+  color: $red;
+  cursor: pointer;
+  // display: flex;
+  align-self: center;
+  line-height: 1;
+  margin: 10px;
+  padding: 1.2em 1.2em;
+  text-decoration: none;
+  text-align: center;
+  text-transform: uppercase;
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 700;
+  font-size: 12px;
+
+  &:hover,
+  &:focus {
+    outline: 0;
+  }
+}
+
+.fourth {
+  border-color: $yellow;
+  color: #000;
+  background: {
+    image: linear-gradient(45deg, $yellow 50%, transparent 50%);
+    position: 100%;
+    size: 400%;
+  }
+  transition: background 300ms ease-in-out;
+
+  &:hover {
+    color: #fff;
+    background-position: 0;
+  }
+}
+</style>
+

example/vue3/src/router/index.ts

@@ -3,13 +3,19 @@ import { createRouter, createWebHistory } from 'vue-router';
 const useModalComponent = () => import('../components/useModal.vue');
 const useStateComponent = () => import('../components/useState.vue');
 const useStringCaseComponent = () => import('../components/useStringCase.vue');
+const useLocalStorageComponent = () => import('../components/useLocalStorage.vue');
 
 const routes = [
   {
     path: '/',
     name: 'useStringCase',
     component: useStringCaseComponent
   },
+  {
+    path: '/use-local-storage-hook',
+    name: 'useState',
+    component: useLocalStorageComponent
+  },
   {
     path: '/use-state-hook',
     name: 'useState',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-use-hooks",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "vue3 use hooks",
   "author": "Abdulnasır OLCAN",
   "license": "MIT",

src/index.ts

@@ -1,3 +1,4 @@
 export * from './useState';
 export { default as useStringCase } from './useStringCase';
-export { default as useModal } from './useModal';
+export { default as useModal } from './useModal';
+export { default as useLocalStorage } from './useLocalStorage';

src/useLocalStorage.ts

@@ -0,0 +1,73 @@
+import { ref, onMounted, onUnmounted, watchEffect } from 'vue';
+
+const useLocalStorage = (storageKey: any, defaultValue = '') => {
+  const value = ref(null);
+  const init = () => {
+    const item = localStorage.getItem(storageKey);
+    if (item !== null) {
+      value.value = parseItem(item);
+      return;
+    }
+    /* @ts-ignore*/
+    value.value = defaultValue;
+  };
+
+  const parseItem = (item: any) => {
+    let value = null;
+    try {
+      value = JSON.parse(item);
+    } catch {
+      value = item;
+    }
+
+    return value;
+  };
+
+  const handler = (event: any) => {
+    if (event.key === storageKey) {
+      value.value = event.newValue ? parseItem(event.newValue) : null;
+    }
+  };
+
+  let initialized = false;
+
+  if (typeof window !== 'undefined') {
+    init();
+    initialized = true;
+  }
+
+  onMounted(() => {
+    if (!initialized) {
+      init();
+    }
+
+    window.addEventListener('storage', handler, true);
+  });
+
+  watchEffect(() => {
+    if (value.value) {
+      localStorage.setItem(storageKey, JSON.stringify(value.value));
+    }
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('storage', handler);
+  });
+
+  const remove = () => {
+    try {
+      localStorage.removeItem(storageKey);
+      value.value = null;
+    } catch (error) {
+      // localStorage can throw.
+      console.error(error);
+    }
+  };
+
+  return {
+    value,
+    remove
+  };
+};
+
+export default useLocalStorage;

tests/useLocalStorage.test.js

@@ -0,0 +1,42 @@
+import { mount } from '@vue/test-utils';
+import { mountComposition } from './utils';
+import useLocalStorage from '../src/useLocalStorage';
+import { nextTick } from 'vue';
+
+const mock = {
+  key: 'test',
+  value: 'value'
+};
+
+beforeEach(() => {
+  window.localStorage.clear();
+});
+
+describe('useLocalStorage', () => {
+  it('should be defined useLocalStorage', () => {
+    expect(useLocalStorage).toBeDefined();
+  });
+
+  it('should get localStorage value', () => {
+    window.localStorage.setItem(mock.key, mock.value);
+    const wrapper = mount(
+      mountComposition(() => {
+        const { value } = useLocalStorage(mock.key);
+        return { value };
+      })
+    );
+    nextTick();
+    expect(wrapper.vm.value).toEqual(mock.value);
+  });
+
+  it('should set localStorage value', () => {
+    const wrapper = mount(
+      mountComposition(() => {
+        const { value } = useLocalStorage(mock.key, mock.value);
+        return { value };
+      })
+    );
+    nextTick();
+    expect(wrapper.vm.value).toEqual(mock.value);
+  });
+});

tests/utils/index.js

@@ -0,0 +1,8 @@
+export const mountComposition = (callback, options = {}) => ({
+    template: '<div></div>',
+    ...options.component,
+    setup() {
+      return callback();
+    },
+  });
+