HTML5プロフェッショナル認定試験 レベル2 あやふや点メモ③

来週末に受験するが、受かるのかどうか。

LocalStorage/SessionStorage

セッションストレージとローカルストレージがある

セッションストレージはタブやブラウザを閉じた時点で削除される。ローカルストレージはブラウザを閉じたとしても半永久的に残る。

どちらもKeyとValueの組み合わせで保存する。わりと簡単だ。

LocalStorageへの保存

localStorage.setItem('text', 'テスト用テキスト');

LocalStorageからの取りだし

const text = localStorage.getItem('text');

LocalStorageからの削除

localStorage.removeItem('text');

indexedDB

イマイチ例がないとよくわかんなかったので、気が付いたらいろいろ頑張って画面を作っていた。理解はできた気がする。

ただ、htmlのコードをブログに載せるのが難しいのでJavaScriptのみ。

indexedDBは非同期処理だから注意とよく見るし、実際に現在のバージョン取得→当該バージョンのDBをopenって単純にしようとするとエラーになる。

じゃあどう回避するんだ？というのはわからず。

js

const newopen = document.getElementById('newopen');
const createObjectStore = document.getElementById('createObjectStore');
const openAndDataAdd = document.getElementById('openAndDataAdd');
const openAndDataPut = document.getElementById('openAndDataPut');
const getItem = document.getElementById('getItem');

newopen.addEventListener('click', ()=> {
  const dbName = document.getElementById('dbName').value;
  const storeName  = document.getElementById('storeName').value;

  const openReq  = indexedDB.open(dbName);
  const result = document.getElementById('returnText');

  //　DB名を指定して接続。DBがなければ新規作成される。
    openReq.onupgradeneeded = function(event){
    //onupgradeneededは、DBのバージョン更新(DBの新規作成も含む)時のみ実行
      console.log('db upgrade');
    }
    openReq.onsuccess = function(event){
    //onupgradeneededの後に実行。更新がない場合はこれだけ実行
      console.log('db open success');
      result.innerText = "db open success";
      const db = event.target.result;
      // 接続を解除する
      db.close();
    }
    openReq.onerror = function(event){
    // 接続に失敗
      console.log('db open error');
    }

});

createObjectStore.addEventListener('click', ()=> {
  const dbName = document.getElementById('dbName').value;
  const storeName  = document.getElementById('storeName').value;

  const openReq = indexedDB.open(dbName,10);
  // オブジェクトストアの作成・削除はDBの更新時しかできないので、バージョンを指定して更新
    openReq.onupgradeneeded = function(event){
      const db = event.target.result;
      db.createObjectStore(storeName, {keyPath : 'id'})
      console.log('createObjectStore success');
      const result = document.getElementById('returnText');
      result.innerText = "createObjectStore success";
    }
});

openAndDataAdd.addEventListener('click', ()=> {
  const dbName = document.getElementById('dbName').value;
  const storeName  = document.getElementById('storeName').value;
  const result = document.getElementById('returnText');
  const data = {id : document.getElementById('Key').value, name : document.getElementById('Value').value};
  const openReq = indexedDB.open(dbName, 10);
  
  openReq.onsuccess = function(event){
      const db = event.target.result;
      const trans = db.transaction(storeName, 'readwrite');
      const store = trans.objectStore(storeName);
      const putReq1 = store.add(data);
  
      putReq1.onsuccess = function(){
        console.log('add data success');
        result.innerText = "add data success";
      }

      trans.oncomplete = function(){
      // トランザクション完了時(putReq.onsuccessの後)に実行
        console.log('transaction complete');
      }
  
   }
  
});

createObjectStore.addEventListener('click', ()=> {
  const dbName = document.getElementById('dbName').value;
  const storeName  = document.getElementById('storeName').value;

  const openReq = indexedDB.open(dbName,10);
  // オブジェクトストアの作成・削除はDBの更新時しかできないので、バージョンを指定して更新
    openReq.onupgradeneeded = function(event){
      const db = event.target.result;
      db.createObjectStore(storeName, {keyPath : 'id'})
      console.log('createObjectStore success');
      const result = document.getElementById('returnText');
      result.innerText = "createObjectStore success";
    }
});

openAndDataPut.addEventListener('click', ()=> {
  const dbName = document.getElementById('dbName').value;
  const storeName  = document.getElementById('storeName').value;
  const result = document.getElementById('returnText');
  const data = {id : document.getElementById('Key').value, name : document.getElementById('Value').value};
  const openReq = indexedDB.open(dbName, 10);
  
  openReq.onsuccess = function(event){
      const db = event.target.result;
      const trans = db.transaction(storeName, 'readwrite');
      const store = trans.objectStore(storeName);
      const putReq1 = store.put(data);
  
      putReq1.onsuccess = function(){
        console.log('put data success');
        result.innerText = "put data success";
      }

      trans.oncomplete = function(){
      // トランザクション完了時(putReq.onsuccessの後)に実行
        console.log('transaction complete');
      }
  
   }
  
});

// 値の取得
getItem.addEventListener('click', ()=> {
  const tableElement = document.getElementById('getItemList');
  const dbName = document.getElementById('dbName').value;
  const storeName  = document.getElementById('storeName').value;
  const openReq = indexedDB.open(dbName, 10);
  
  openReq.onsuccess = function(event){
      const db = event.target.result;
      const trans = db.transaction(storeName);
      const store = trans.objectStore(storeName);
      const getCursor = store.openCursor();
      
      getCursor.onsuccess = function(event){
        const cursor = event.target.result;
        //ここから取得
        if(cursor){
          console.log(`Key:${cursor.key}`);
          console.log(`Value:${cursor.value.name}`);
          // tbody要素にtr要素（行）を最後に追加
          const trElement = tableElement.tBodies[0].insertRow(-1);
          // td要素を追加
          const cellElement0 = trElement.insertCell(0);
          cellElement0.appendChild(document.createTextNode(cursor.key));
          const cellElement1 = trElement.insertCell(0);
          cellElement1.appendChild(document.createTextNode(cursor.value.name));

          // const output = document.getElementById(cursor.key);
          // output.innerHTML = `Key:${cursor.key}, Value:${cursor.value.name}`;
         cursor.continue();
        }
       } 

      trans.oncomplete = function(){
      // トランザクション完了時(putReq.onsuccessの後)に実行
        console.log('transaction complete');
      }
   }
  
});