Vue: localStorage封裝
阿新 • • 發佈:2022-03-28
App.vue
<template>
<div id="heart" @click="toggleFlag">
<span :class="{active:flag}"></span>
<span :class="{active:flag}"></span>
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { getItem, setItem } from '@/utils/localStorage'
const flag = ref<boolean>(true)
const toggleFlag = () => {
flag.value = ! flag.value
setItem('flag', flag.value)
}
onMounted(() => {
flag.value = getItem('flag', true)
})
</script>
<style lang="less">
.active {
background-color: red !important;
}
#heart > span {
background-color: palegreen;
}
#heart {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 150px;
/* background-color: palegreen; */
animation: heart 1s linear 0s infinite;
}
#heart > span:nth-child(1) {
position: absolute;
width: 100px;
height: 150px;
border -radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
margin-left: 50px;
}
#heart > span:last-child {
position: absolute;
width: 100px;
height: 150px;
border-radius: 50px 50px 0 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
margin-left: -50px;
}
@keyframes heart {
0% {
transform: scale(1);
}
50% {
transform: scale(0.8);
}
100% {
transform: scale(1);
}
}
</style>
localStorage.ts
const namespace: string = 'zax'
export function setItem(key: string, value: any) {
console.log(key, value)
let storage = window.localStorage.getItem(namespace)
if (! storage) {
storage = {}
} else {
storage = JSON.parse(storage) || {}
}
storage[key] = value
window.localStorage.setItem(namespace, JSON.stringify(storage))
}
export function getItem(key: string, defaultValue: any) {
let storage = window.localStorage.getItem(namespace)
if (! storage) {
storage = {key: defaultValue}
window.localStorage.setItem(namespace, JSON.stringify(storage))
return defaultValue
}
storage = JSON.parse(storage)
return storage[key]
}