SCALE — Build Lab
開発パターン · JAVASCRIPT PATTERN

PD/SD パターン(永続/セッション保存)

CATEGORY開発パターン TYPEJavaScript Pattern EFFORT60〜120分 DIFFICULTY
PRIMARY CODE
js
// PD = Persistent Data(永続)/ SD = Session Data(一時)
const _SD = {};
function PD(key, defaultVal) {
  try { return JSON.parse(localStorage.getItem('pd:' + key)) ?? defaultVal; }
  catch { return defaultVal; }
}
function setPD(key, val) {
  localStorage.setItem('pd:' + key, JSON.stringify(val));
  scheduleServerSync(key, val);  // debounceで非同期サーバ送信
}
function SD(key, defaultVal) { return _SD[key] ?? defaultVal; }
function setSD(key, val) { _SD[key] = val; }
前提条件
Tailwind CSS v4TypeScript 5
USE CASES
  • UI状態 + フォームドラフト

PD/SD パターン(永続/セッション保存)

:LiTarget: 用途

永続化(PD: localStorage + サーバ同期)と セッション一時(SD: メモリのみ)を統一APIで切替。

:LiSparkle: 特徴

  • 永続/一時の二択
  • 統一API
  • 型なしの軽量実装
  • デバウンスサーバ同期

:LiCode: コード(コピペ用)

// PD = Persistent Data(永続)/ SD = Session Data(一時)
const _SD = {};
function PD(key, defaultVal) {
  try { return JSON.parse(localStorage.getItem('pd:' + key)) ?? defaultVal; }
  catch { return defaultVal; }
}
function setPD(key, val) {
  localStorage.setItem('pd:' + key, JSON.stringify(val));
  scheduleServerSync(key, val);  // debounceで非同期サーバ送信
}
function SD(key, defaultVal) { return _SD[key] ?? defaultVal; }
function setSD(key, val) { _SD[key] = val; }

:LiHandPointer: 使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

:LiAlertCircle: 注意事項

  • 依存パッケージを忘れず追加