[MEIT_문제해결] javascript/html 데이터 전달하기-웹스토리지

💀문제

• index.html에 연결되어 있는 index.js에서 Key_.html에 연결되어 있는 Key_.js로 keyword데이터를 전달해야 했다.

• 처음엔 JSON.stringify, JSON.parse로 하려 했으나, 계속 Unexpected token u in JSON at position 0에러가 났고 이를 해결하기 위해 구글링을 통해 갖은 수정을 했지만 장렬히 실패했다.

• 그 다음엔 import와 export를 사용하여 js간 데이터를 전달해보려 했으나, function 안에서 변수에 export를 선언할 수 없었다.

✏️ Web Storage 웹스토리지

• 로컬 스토리지와 세션 스토리지 두가지가 있다.

• 두 가지의 차이점은 데이터 보존 기간과 범위이다.
• 로컬 스토리지는 데이터를 저장하고 직접 지워줘야 하지만, 세션 스토리지는 창이 닫힐 때 알아서 소멸된다.

• 또한 로컬 스토리지는 같은 브라우저 내 여러 창들 간에 데이터가 공유되지만, 세션 스토리지는 각자 데이터가 분리되어 저장된다. 약간 로컬은 static, 세션은 멤버변수 느낌이다.

• 둘의 공통점은 데이터를 브라우저 상에 저장한다는 것이다. 그리고 key/value 형태로 저장된다.

✏️ Local Storage 로컬 스토리지

// 키에 데이터 쓰기
localStorage.setItem("key", value);

// 키로 부터 데이터 읽기
localStorage.getItem("key");

// 키의 데이터 삭제
localStorage.removeItem("key");

// 모든 키의 데이터 삭제
localStorage.clear();

// 저장된 키/값 쌍의 개수
localStorage.length;

💊해결

• 위를 참고하여

    // index.js
    localStorge.setItem("text", texts);
  
    // Key_.js
    var keyword = localStorge.getItem("text");
  

  이렇게 적용시켜 주었더니 드디어 됐다. 감격
  로컬 스토리지에 저장되어있는지 보고싶다면 창에서 F12 -> application -> local storage를 보면 확인할 수 있다.

  주의할 점은 string형만 적용 할 수 있다는 것이다

• 따라서, 여러 데이터를 한번에 저장하고 싶다면 JSON형으로 묶어서 변수에 담은 다음 로컬에 저장하면 될 듯 하다.