[WEB] 정보의 영속성과 웹의 취약점

웹의 취약점, state less

---

페이지(page)를 이동할때마다 상태정보가 모두 사라진다.
a페이지에서 사용했던 정보들(변수, 객체...)이 b페이지로 이동하면 모두 사라진다.
단, 웹은 정보를 하나하나 전송하는 기능은 있다, get, post방식

=> 정보의 영속성을 유지하기 위한 저장메커니즘이 필요하다.(없어도 그만인 정보)

🌝 클라이언트쪽에 저장하는 기술
- 단점: 사용자가 직접 보기, 삭제가 가능하다

🍘 Cookie (문자열형태만 저장가능, 요청(request)이 있을때마다 서버로 매번 쿠키를 전송한다, 과부하)
👣 WebStorage (브라우저 안의 저장소)
  - localStorage: 만료기간 없이 삭제하지 않으면 평생유지
  - sessionStorage: 세션이 유지되는 동안에만 정보유지 (default 30 minutes)
   (브라우저가 유지되는 동안까지도 정보 유지 가능)

🌚 WAS쪽에 저장하는 기술
- 단점: 너무 멀다.

pageContext < request < session < application

  $(function() {
      function getInfo() {
          let len = sessionStorage.length;
          let str = "저장된 개수: " + len + "<br>";
          for(let i = 0; i < len; i++) {
             let key = sessionStorage.key(i);
            let value = sessionStorage.getItem(key);
            str += key + ": " + value + "<br>";
        }

        $("#result").html(str);
      } // getInfo End

      getInfo();

      $("#btnSave").click(function() {
          let key = $("#s_key").val();
          let value = $("#s_value").val();
          if($("#s_key").val() == "" || $("#s_value").val() == "") {
              alert("key와 value를 입력하세요.");
              return;
          }

          // sessionStorage에 저장한다
          sessionStorage.setItem(key, value);

          $("#s_key").val("");
          $("#s_value").val("");
          $("#s_key").focus();

          // 다시 정보조회
          getInfo();
      }); // click End

    $("#btnClear").click(function() {
           // 사용자 입력값을 받는 창
        let key = prompt("삭제할 key는?");
        sessionStorage.removeItem(key);
        // 다시 정보조회
        getInfo();
    });
  });