rh-storage

基础用法（localStorage）

import React from 'react';
import useStorage from 'rh-storage'
function Userinfo(){
    const [ useinfo ] = useStorage('userinfo');
    return JSON.stringify(userinfo);
}
function Login(){
    const [ ,setUserinfo ] = useStorage('userinfo');
    return <div onClick={()=>setUserinfo({ token:'abc', nickname:'def' })}>Login</div>
}
function Layout(){
    return <>
        <Userinfo />
        <Login />
    </>
}

扩展用法（sessionStorage）

import { hookFactory } from 'rh-storage'
const useStorage = hookFactory(window.sessionStorage);
export default useStorage

复杂用法（crypto）

import AES from 'crypto-js/aes';
import UTF8 from 'crypto-js/enc-utf8';
const AESKey = 'www.idler8.com';
function getCryptoStorage(Storage){
    return {
        getItem(key){
            try {
                return AES.decrypt(Storage.getItem(key), AESKey).toString(UTF8);
            } catch (e) {
                return null;
            }
        },
        setItem(key, value){
            Storage.setItem(key,AES.encrypt(value, AESKey).toString())
        },
        removeItem(key){
            Storage.removeItem(key)
        },
        clear(){
            Storage.clear();
        }
    }
}
const cryptoStorage = getCryptoStorage(window.sessionStorage)
export default cryptoStorage;

多页面同步（storage event）

import { hookFactory, getListener, addWindowListener, CLEAR} from 'rh-storage'
const listener = getListener();
const [,updateValue] = listener;
addWindowListener({
    create:(key, value)=>updateValue(key, value),
    update:(key, value)=>updateValue(key, value),
    remove:(key)=>updateValue(key),
    clear:()=>updateValue(CLEAR),
})
const useStorage = hookFactory(window.localStorage, listener);
export default useStorage