【JavaScript入門】ストレージを利用する（storage.js）

node-js/
 ├─ app/
 │   ├─ index.html
 │   ├─ style.css
 │   └─ js/               ← JS モジュール群
 │        ├─ common.js
 │        ├─ storage.js   ← ここで作成
 │        ├─ imageArea.js
 │        ├─ imageEffects.js
 │        ├─ controlArea.js
 │        ├─ commentArea.js
 │        ├─ sendArea.js
 │        ├─ dateFormat.js
 │        └─ postListArea.js
 ├─ index.js               ← API／サーバ側
 ├─ upload_images/         ← 画像保存場所
 └─ post-dat.txt           ← 投稿データ（JSON など）

/* ---------------------------------------------------
   storage.js
   画像 (Canvas) と コメント を localStorage に保存・復元
   - 依存ライブラリなし
   - すべての公開 API を window.* にぶら下げ、他 JS から容易に呼べる
--------------------------------------------------- */

// ページ表示直後に “前回の作業状態” を復元
window.addEventListener('DOMContentLoaded', () => {
  restoreCanvasFromStorage();
  restoreCommentFromStorage();
});

/* ========= 定数（ストレージキー） =========== */
const KEY_CANVAS  = 'appCanvas';   // Base64 化した画像データ
const KEY_COMMENT = 'appComment';  // テキストエリアの内容

/* ========= Canvas の保存 =========== */
/**
 * <canvas id="view"> を PNG(Base64) で localStorage へ保存
 * 5MB 制限を超えると例外が出るので大きい画像は要注意
 */
function saveCanvasToStorage(){
  const canvas  = document.querySelector('#view');
  const dataURL = canvas.toDataURL();     // "data:image/png;base64,..." 形式
  localStorage.setItem(KEY_CANVAS, dataURL);
}

/**
 * 起動時に保存済み Canvas があれば復元
 */
function restoreCanvasFromStorage(){
  const dataURL = localStorage.getItem(KEY_CANVAS);
  if (!dataURL) return;                   // そもそも未保存なら何もしない

  const canvas = document.querySelector('#view');
  const ctx    = canvas.getContext('2d');
  const img    = new Image();

  // Base64 → Image → Canvas へ描画
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    canvas.setAttribute('time', Date.now());            // “いつ復元したか” のメモ
    document.querySelector('#noView').style.display='none';
    canvas.style.display = 'block';
  };
  img.src = dataURL;
}

/** Canvas データをストレージから削除 */
function removeCanvasStorage(){
  localStorage.removeItem(KEY_CANVAS);
}

/* ========= コメントの保存 =========== */
function saveCommentToStorage(){
  const txt = document.querySelector('#comment').value;
  localStorage.setItem(KEY_COMMENT, txt);
}

/**
 * デフォルト値は <textarea data-default="..."> で埋め込む
 */
function restoreCommentFromStorage(){
  const el  = document.querySelector('#comment');
  const val = localStorage.getItem(KEY_COMMENT) ?? el.dataset.default;
  el.value  = val;
}

/** コメントだけを削除 */
function removeCommentStorage(){
  localStorage.removeItem(KEY_COMMENT);
}

/* ========= パブリック API (グローバル公開) =========== */
window.saveCanvasToStorage   = saveCanvasToStorage;
window.removeCanvasStorage   = removeCanvasStorage;
window.saveCommentToStorage  = saveCommentToStorage;
window.removeCommentStorage  = removeCommentStorage;