@yangchanghao/use-effect-storage

@yangchanghao/use-effect-storage使用说明

实时监听本地缓存（localStorage|sessionStorage)里值的变化，并触发你希望执行的回调函数,在vue/react的路由或者组件的生命周期销毁函数去销毁该hooks实例

Vue3.x下使用

<template>
  <div>............</div>
</template>

<script lang='ts' setup>
import useEffectStorage from '@yangchanghao/use-effect-storage/vue';

useEffectStorage((e)=>{
  // key: 改变的storage的key
  // value: 改变的storage的key对应的value
  // storageType: localStorage | sessionStorage
  const {key,value,storageType} = e;
},['name1','name2','name3'],'localStorage');

</script>

React（FunctionComponent）下使用

import React,{ FunctionComponent } from 'react';
import useEffectStorage from '@yangchanghao/use-effect-storage/react';

const Index: FunctionComponent<any> = (props)=>{
    
    useEffectStorage((e)=>{
      // key: 改变的storage的key
      // value: 改变的storage的key对应的value
      // storageType: localStorage | sessionStorage
      const {key,value,storageType} = e;
    },['name1','name2','name3'],'sessionStorage')

    return (
        <div>...............</div>
    )
}

export default Index;