global store

zustand

zustand

import { create } from 'zustand'

const useStore = create((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
}))

function Counter() {
  const { count, inc } = useStore()

  return (
    <div>
      <span>{count}</span>
      <button onClick={inc}>one up</button>
    </div>
  )
}

Tampermonkey

https://github.com/EnotionZ/tampermonkey

// Greasemonkey method
(async ()=> {
  _.state = JSON.parse(await GM.getValue(appId, JSON.stringify({
    kx: '16px',
    ky: '16px',
    display: 'none'
  })))
})();

_.setState = state=> {
  Object.assign(_.state, state);
  GM.setValue(appId, JSON.stringify(_.state));
};

Localstorage

// localstorage method
_.state = JSON.parse(localStorage.getItem(appId) || null) || {
  kx: '16px',
  ky: '16px',
  display: 'none'
};

_.setState = state=> {
  Object.assign(_.state, state);
  localStorage.setItem(appId, JSON.stringify(_.state));
};