[Refactor/Chore] Move localStorage/window.localStorage to @/hooks/use-local-storage

[lyzno1]

Self Checks

• I have read the Contributing Guide and Language Policy.
• This is only for refactors or chores; if you would like to ask a question, please head to Discussions.
• I have searched for existing issues search for existing issues, including closed ones.
• I confirm that I am using English to submit this report, otherwise it will be closed.
• 【中文用户 & Non English User】请使用英语提交，否则会被关闭 ：）
• Please do not modify this template :) and fill in all the required fields.

Description

Move direct localStorage / window.localStorage / globalThis.localStorage usage in frontend code to @/hooks/use-local-storage.

Keep each PR small: migrate one vertical area or one storage concern at a time, instead of mixing unrelated keys/features in the same PR.

Pattern

For normal JSON-backed values:

const [value, setValue] = useLocalStorage<boolean>('some-key', false)

For existing raw string values:

const [value, setValue] = useLocalStorage<string>('some-key', '0', { raw: true })

For setter-only usage:

const setValue = useSetLocalStorage<string>('some-key', { raw: true })

Motivation

No response

Additional Context

No response

[lyzno1]

@dosubot give a best practice example for this migration.

[dosubot]

Here's a best-practice migration example showing a before/after for a typical component:

---

Before (direct localStorage access):

// ❌ Ad-hoc, not reactive, no SSR safety
const MyComponent = () => {
  const [hidden, setHidden] = useState(() => {
    return localStorage.getItem('hide-maintenance-notice') === '1'
  })

  const dismiss = () => {
    localStorage.setItem('hide-maintenance-notice', '1')
    setHidden(true)
  }

  if (hidden) return null
  return <Banner onDismiss={dismiss} />
}

After (using @/hooks/use-local-storage):

// ✅ Reactive, SSR-safe, cross-tab synced
import { useLocalStorage } from '@/hooks/use-local-storage'

const MyComponent = () => {
  const [hiddenValue, setHiddenValue] = useLocalStorage<string>(
    'hide-maintenance-notice',
    '0',
    { raw: true },
  )

  if (hiddenValue === '1') return null
  return <Banner onDismiss={() => setHiddenValue('1')} />
}

[1]

---

For JSON-backed typed values (most common case):

import { useLocalStorage } from '@/hooks/use-local-storage'

// Boolean toggle
const [enabled, setEnabled] = useLocalStorage<boolean>('feature-flag-x', false)

// Complex object
const [prefs, setPrefs] = useLocalStorage<Record<string, string>>(
  'user-prefs',
  {},
)
setPrefs(prev => ({ ...prev, theme: 'dark' }))

[2] [3]

---

For setter-only usage (when you write but don't need to subscribe to reads):

import { useSetLocalStorage } from '@/hooks/use-local-storage'

const setPanelWidth = useSetLocalStorage<number>(
  'workflow-node-panel-width',
  { raw: true },
)

const handleResize = (width: number) => {
  setPanelWidth(width)
}

[4]

---

Key guidelines for each PR:

1. One concern per PR — migrate one storage key or one vertical area at a time.
2. Match the original serialization — if the old code stored raw strings ('0'/'1'), use { raw: true }. If it used JSON.parse/JSON.stringify, omit options (JSON is the default).
3. Set null to remove — calling setValue(null) removes the key from storage [5].
4. Provide a server-safe default — the second argument is what renders during SSR before localStorage is available.
5. Remove old imports — delete any leftover import … from '@/utils/local-storage' or ahooks useLocalStorageState usage [6] [7].

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.

[adityabhatkar23]

@lyzno1 can i work on this issue?

[lyzno1]

@lyzno1 can i work on this issue?

sure, pls keep it within 3–5 call sites per PR.

[myshkin451]

Hi @lyzno1, I'd like to take a small slice of this migration around the workflow block selector. I can start with featured-tools.tsx and featured-triggers.tsx if that sounds good.

[kuishou68]

I've submitted a PR to migrate NOTE_SHOW_AUTHOR_STORAGE_KEY to use the useLocalStorage/useSetLocalStorage hooks: #36915

This covers the workflow note-node and operator hooks, replacing direct localStorage.getItem/setItem calls with the hook-based pattern.