Update dev-tools.js

dev-tools.js

@@ -386,7 +386,233 @@
       }
     });
   }
+  function createStoragePanel() {
+    const panel = document.createElement('div');
+    panel.className = 'devtools-panel';
+    panel.id = 'storage-panel';
+
+    // LocalStorage表示
+    const localStorageTitle = document.createElement('h3');
+    localStorageTitle.textContent = 'Local Storage';
+    panel.appendChild(localStorageTitle);
+
+    const localStorageTable = document.createElement('table');
+    localStorageTable.className = 'storage-table';
+    panel.appendChild(localStorageTable);
+
+    const addLocalStorageBtn = document.createElement('button');
+    addLocalStorageBtn.className = 'add-btn';
+    addLocalStorageBtn.textContent = '+ Local Storageに追加';
+    addLocalStorageBtn.onclick = () => {
+      const key = prompt('キー名を入力');
+      if (key) {
+        const value = prompt('値を入力');
+        localStorage.setItem(key, value);
+        renderStorage();
+      }
+    };
+    panel.appendChild(addLocalStorageBtn);
+
+    // SessionStorage表示
+    const sessionStorageTitle = document.createElement('h3');
+    sessionStorageTitle.style.marginTop = '20px';
+    sessionStorageTitle.textContent = 'Session Storage';
+    panel.appendChild(sessionStorageTitle);
+
+    const sessionStorageTable = document.createElement('table');
+    sessionStorageTable.className = 'storage-table';
+    panel.appendChild(sessionStorageTable);
+
+    const addSessionStorageBtn = document.createElement('button');
+    addSessionStorageBtn.className = 'add-btn';
+    addSessionStorageBtn.textContent = '+ Session Storageに追加';
+    addSessionStorageBtn.onclick = () => {
+      const key = prompt('キー名を入力');
+      if (key) {
+        const value = prompt('値を入力');
+        sessionStorage.setItem(key, value);
+        renderStorage();
+      }
+    };
+    panel.appendChild(addSessionStorageBtn);
+
+    // Cookie表示
+    const cookiesTitle = document.createElement('h3');
+    cookiesTitle.style.marginTop = '20px';
+    cookiesTitle.textContent = 'Cookies';
+    panel.appendChild(cookiesTitle);
+
+    const cookiesTable = document.createElement('table');
+    cookiesTable.className = 'storage-table';
+    panel.appendChild(cookiesTable);
+
+    const addCookieBtn = document.createElement('button');
+    addCookieBtn.className = 'add-btn';
+    addCookieBtn.textContent = '+ Cookieに追加';
+    addCookieBtn.onclick = () => {
+      const name = prompt('Cookie名を入力');
+      if (name) {
+        const value = prompt('値を入力');
+        document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; path=/`;
+        renderStorage();
+      }
+    };
+    panel.appendChild(addCookieBtn);
+
+    // ストレージを表示する関数
+    function renderStorage() {
+      renderTable(localStorageTable, localStorage, 'local');
+      renderTable(sessionStorageTable, sessionStorage, 'session');
+      renderCookiesTable(cookiesTable);
+    }
+
+    function renderTable(tableElement, storage, type) {
+      tableElement.innerHTML = `
+        <thead>
+          <tr>
+            <th>Key</th>
+            <th>Value</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody></tbody>
+      `;
+
+      const tbody = tableElement.querySelector('tbody');
+      
+      for (let i = 0; i < storage.length; i++) {
+        const key = storage.key(i);
+        const value = storage.getItem(key);
+        
+        const row = document.createElement('tr');
+        
+        const keyCell = document.createElement('td');
+        const keySpan = document.createElement('span');
+        keySpan.className = 'editable';
+        keySpan.textContent = key;
+        keySpan.onclick = () => {
+          const newKey = prompt('新しいキー名を入力', key);
+          if (newKey && newKey !== key) {
+            storage.setItem(newKey, value);
+            storage.removeItem(key);
+            renderStorage();
+          }
+        };
+        keyCell.appendChild(keySpan);
+        
+        const valueCell = document.createElement('td');
+        const valueSpan = document.createElement('span');
+        valueSpan.className = 'editable';
+        valueSpan.textContent = value;
+        valueSpan.onclick = () => {
+          const newValue = prompt('新しい値を入力', value);
+          if (newValue !== null) {
+            storage.setItem(key, newValue);
+            renderStorage();
+          }
+        };
+        valueCell.appendChild(valueSpan);
+        
+        const actionsCell = document.createElement('td');
+        actionsCell.className = 'storage-actions';
+        
+        const deleteBtn = document.createElement('button');
+        deleteBtn.className = 'storage-btn';
+        deleteBtn.textContent = 'Delete';
+        deleteBtn.onclick = () => {
+          storage.removeItem(key);
+          renderStorage();
+        };
+        
+        actionsCell.appendChild(deleteBtn);
+        
+        row.appendChild(keyCell);
+        row.appendChild(valueCell);
+        row.appendChild(actionsCell);
+        
+        tbody.appendChild(row);
+      }
+    }
+
+    function renderCookiesTable(tableElement) {
+      tableElement.innerHTML = `
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Value</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody></tbody>
+      `;
+
+      const tbody = tableElement.querySelector('tbody');
+      
+      document.cookie.split(';').forEach(cookie => {
+        if (!cookie.trim()) return;
+        
+        const [name, ...valueParts] = cookie.split('=');
+        const decodedName = decodeURIComponent(name.trim());
+        const value = valueParts.join('=').trim();
+        
+        const row = document.createElement('tr');
+        
+        const nameCell = document.createElement('td');
+        const nameSpan = document.createElement('span');
+        nameSpan.className = 'editable';
+        nameSpan.textContent = decodedName;
+        nameSpan.onclick = () => {
+          const newName = prompt('新しい名前を入力', decodedName);
+          if (newName && newName !== decodedName) {
+            const newValue = prompt('新しい値を入力', decodeURIComponent(value));
+            if (newValue !== null) {
+              document.cookie = `${encodeURIComponent(newName)}=${encodeURIComponent(newValue)}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/`;
+              document.cookie = `${name.trim()}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
+              renderStorage();
+            }
+          }
+        };
+        nameCell.appendChild(nameSpan);
+        
+        const valueCell = document.createElement('td');
+        const valueSpan = document.createElement('span');
+        valueSpan.className = 'editable';
+        valueSpan.textContent = decodeURIComponent(value);
+        valueSpan.onclick = () => {
+          const newValue = prompt('新しい値を入力', decodeURIComponent(value));
+          if (newValue !== null) {
+            document.cookie = `${name.trim()}=${encodeURIComponent(newValue)}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/`;
+            renderStorage();
+          }
+        };
+        valueCell.appendChild(valueSpan);
+        
+        const actionsCell = document.createElement('td');
+        actionsCell.className = 'storage-actions';
+        
+        const deleteBtn = document.createElement('button');
+        deleteBtn.className = 'storage-btn';
+        deleteBtn.textContent = 'Delete';
+        deleteBtn.onclick = () => {
+          document.cookie = `${name.trim()}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
+          renderStorage();
+        };
+        
+        actionsCell.appendChild(deleteBtn);
+        
+        row.appendChild(nameCell);
+        row.appendChild(valueCell);
+        row.appendChild(actionsCell);
+        
+        tbody.appendChild(row);
+      });
+    }
 
+    // 初期表示
+    renderStorage();
+
+    return panel;
+  }
   // コンテキストメニューアクション処理
   function handleContextMenuAction(action) {
     if (!selectedElement) return;