学習[JS]ローカルデータ(set,get,remove)

🔴 localStorageの表示

開発者ツール>アプリケーション>ローカルストレージ

🟠 html、cssファイル

🟡 3つの主な方法

// 값 저장하기 --> 
localStorage.setItem('key', value);
// 값 가져오기 --> 
localStorage.getItem('key');
// 값 삭제하기 --> 
localStorage.removeItem('key');

🟢 JSの作成

  /* 버튼 */
  const btnSLD = document.querySelector('.btnSetLocalData');
  const btnGLD = document.querySelector('.btnGetLocalData');
  /* input 텍스트 */
  const setInput = document.querySelector('#setInput');
  const getInput = document.querySelector('#getInput');

🔵 Set Dataボタンをクリックしてローカルストレージを保存

  const setData = () => {
    /* 할 일 처리 --> 입력한 텍스트 값 가져오기 */
    let setInputValue = setInput.value;

    /* localStorage 저장 */
    localStorage.setItem('inputValue', setInputValue);
    setInput.value = '';
  };

/* set Data 버튼 클릭 시 */
  btnSLD.addEventListener('click', setData);
/* 엔터 치면 값을 localStorage에 저장 */
  setInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
      setData();
    }
  });

🟣 Get DataボタンをクリックしてlocalStorage値を取得

/* get Data 버튼 클릭 시 */
  btnGLD.addEventListener('click', () => {
    /* 할 일 처리 --> 해당 키의 로컬 데이터가 있으면 가져오기 */
    const getData = localStorage.getItem('inputValue');

    if (!getData) alert('해당 키 로컬에 저장된 데이터가 없네요~');
    else getInput.value = getData;
  });

🟤 Removeボタンをクリックすると値が削除されます

  /* Remove */
  const btnRLD = document.querySelector('.btnRemoveLocalData');

  btnRLD.addEventListener('click', () => {
    /* 할 일 처리 --> 해당 키의 로컬 데이터 삭제 */
    localStorage.removeItem('inputValue');
    alert('삭제 완료!');
  });