HTMLデータ属性を使用したクライアントストレージサーバ上のデータ

普段はnode.jsとhandlebars(ejsに似ている)に開発されている.しかし、サーバがフロントエンドにデータを送信すると、サーバのデータがフロントエンドにどのように格納されるかは常に難題である.通常はjavascript変数に保存され、reactのようにstate hookが一般的に使用されていますが、今回はHTMLが正式にサポートしている데이터 속성(data attribute)を学習して内容を整理しました.

<ul class="products">
  <li data-id="0" data-is-used="false">Samsung phone</li>
  <li data-id="1" data-is-used="true">Apple phone</li>
  <li data-id="2" data-is-used="false">Mac</li>
  <li data-id="3" data-is-used="false">Dell</li>
</ul>

使い方は簡単です.data-で始まるタグとしての属性を入れればいいです.上記の例ではidが追加されています.これらのデータは、後でサーバにリクエストを送信する場合に使用できます.JSデータ属性の使用方法:

const product = document.querySelector('li');

product.dataset.id // 0
product.dataset.isUsed // false

product.dataset.isSoldout = true //새로운 데이터 속성 생성

インポートデータは、dataset.데이터값を使用することができる.このときハイフネーション(-)はキャメルボックスになります.データを挿入する場合は、逆にdatasetに新しい値を追加するだけです.
では、ここまでの使用方法では、データ属性でコードを改善する例を作成します.状況はこうです.商品を購入する場合、「オプション」をクリックすると、そのオプションのid値をカートテーブルに追加する必要があります.

既存のコードは次のとおりです.

<ul class="options">
  <li class="option">
    <span class="option-name">색상: 화이트</span>
    <span class="option-id hidden">101</span>
  </li>
    <li class="option">
    <span class="option-name">색상: 그레이</span>
    <span class="option-id hidden">102</span>
  </li>
    <li class="option">
    <span class="option-name">색상: 블랙</span>
    <span class="option-id hidden">103</span>
  </li>
</ul>

const options = document.querySelectorAll('.option')

const postOptionId = async (e) => {
  const optionId = e.currentTarget.querySelector('.option-id').innerText;
  try{
    const res = await axios.post(`/api/cart/options/${optionId}`);
    if(res.status === 201) {
      //생략
    }
  }catch(err){
    alert("오류가 발생했습니다");
    console.log(err);
  }
}
options.forEach((option) => {
  option.addEventListener('click', postOptionId)
})

さらにoption-idラベルを作成し,隠蔽処理を行った.これにより、サーバからインポートしたデータを保存できますが、不要な要素が生成されます.data 속성を使用して改善されたコードは、次のとおりです.

<ul class="options">
  <li class="option" data-id="101">
    색상: 화이트
  </li>
  <li class="option" data-id="102">
    색상: 그레이
  </li>
  <li class="option" data-id="103">
    색상: 블랙
  </li>
</ul>

const options = document.querySelectorAll('.option')

const postOptionId = async (e) => {
  const optionId = e.currentTarget.dataset.id;
  try{
    const res = await axios.post(`/api/cart/options/${optionId}`);
    if(res.status === 201) {
      //생략
    }
  }catch(err){
    alert("오류가 발생했습니다");
    console.log(err);
  }
}
options.forEach((option) => {
  option.addEventListener('click', postOptionId)
})

HTMLも簡潔になり、JavaScriptからの値取得も簡単になりました.これによりdataプロパティを使用すると、サーバ上のデータを簡単に格納できます.このように保存されたデータは、サーバに要求を送信するために使用される.ただし、データ属性を使用する場合は、パスワードのように敏感で安全な情報を含んではいけないことに注意してください.フロントで操作したり奪われたりする可能性があるからです.