📍localstorage 값 저장하기

localStorage.setItem('key', value);

HTML

<tr>
  <td style="vertical-align: middle"> 브라우저 로컬 데이터에 저장하기 </td>
  <td style="vertical-align: middle"><input type="text" /></td>
  <td style="vertical-align: middle"><button class="btnSetLocalData">Set Data</button></td>
</tr>

JS

const btnSLD = document.querySelector(".btnSetLocalData");
const input = document.querySelector("input");

btnSLD.addEventListener("click", () => {
    const inputValue = input.value;

    //localStorage에 저장하기
    localStorage.setItem("userid", inputValue);
    input.value = ""; //저장 후 input 빈칸으로 만듬
  });

---

📍localstorage 값 불러오기

localStorage.getItem('key');

HTML

<tr>
   	<td class="align-middle">브라우저 로컬 데이터에 가져오기</td>
    <td class="align-middle">↑ 위에 표시</td>
    <td class="align-middle"><button class="btngetLocalData">get Data</button></td>
</tr>

JS

  const btnGLD = document.querySelector(".btngetLocalData");

  btnGLD.addEventListener("click", () => {
    const getData = localStorage.getItem("userid");

    if (!getData) alert("해당 키가 로컬에 저장된 데이터가 없습니다");
    else input.value = getData; //input 텍스트 박스에 삽입
  });

📍localstorage key만 불러오기

localStorage.key(i);

---

📍localstorage 값 삭제하기

localStorage.RemoveItem('key');

HTML

<tr>
    <td class="align-middle">브라우저 로컬 데이터 삭제하기</td>
    <td class="align-middle">-</td>
    <td class="align-middle"><button class="btnRemoveLocalData">Remove</button></td>
</tr>

JS

const btnRLD = document.querySelector(".btnRemoveLocalData");
  
  btnRLD.addEventListener("click", () => {
  localStorage.removeItem("userid");
    alert("삭제완료");
  });

---

📍localstorage 값 전체삭제하기

localStorage.clear();