메뉴 건너뛰기

kode2.com

HTML5 Storage

2019.02.18 15:34

kode2 조회 수:56

  <!doctype html>
   
  <html>
  <head>
  <style>
  body {
  background-color:#2b2b2b;
  color:white;
  }
   
  h2 { color:#f5f5f5; }
   
  #displaySession, #displayLocal {
  padding:5px;
  border:1px solid #fff;
  margin:10px;
  width:350px;
  height:auto;
  }
   
  </style>
   
  </head>
  <body>
  <h2>Session Storage</h2>
  <input type = 'text' name = '' value = '' id = 'first'/>
  <button onclick = 'javascript:saveTheResultSession();'> Save </button>
  <div id = 'displaySession'> Empty </div>
   
  <h2>Local Storage</h2>
  <input type = 'text' name = '' value = '' id = 'second'/>
  <button onclick = 'javascript:saveTheResultLocal();'> Save </button>
  <div id = 'displayLocal'> Empty </div>
  <script type="text/javascript">
  (function(){
  loadValue();
  })();
   
  function loadValue()
  {
  getTheResultSession();
  getTheResultLocal();
  }
   
  function saveTheResultSession() {
   
  var data = document.getElementById('first');
  var value = data.value;
   
  sessionStorage.setItem(1, value);
   
  getTheResultSession();
  }
   
   
  function getTheResultSession() {
  var data = sessionStorage.getItem(1);
   
  if (data)
  document.getElementById('displaySession').innerHTML = data;
  }
   
  function saveTheResultLocal() {
   
  var data = document.getElementById('second');
  var value = data.value;
   
  localStorage.setItem(1, value);
   
  getTheResultLocal();
  }
   
   
  function getTheResultLocal() {
  var data = localStorage.getItem(1);
   
  if (data)
  document.getElementById('displayLocal').innerHTML = data;
  }
   
   
   
   
  </script>
  </body>
 

</html>

-------------------

 

* Web Storage :

   웹 작업 중 가장 중요한 것은 클라이언트 쪽에서 데이터를 저장할 수 있는 기능이다. 

          Ex) cookie(일시적인 저장)

 

   1. KeyValuePair 

   2. 세션 종료되어도 저장해 둔다. 

   3. cookie의 단점을 보완. 

  * cookie 단점

  3-1) 저장용량 제한 (4K)

  3-2) 보안문제

  3-3) 동일 사이트에서 하나 이상의 탭(메뉴)를 열었을 때, 추적하기 힘들다. 

 

 * Session Storage 

   1. Data Save & Search

      // Save 

    sessionStorage.setItem(key, value);

      // Search

  var item = sessionStorage.getItem(key);

   2. Remove

         sessionStorage.removeItem(key);

                sessionStorage.clear();

 

 

 

 * Local Storage : 

     1. Data Save & Search

      // Save 

    localStorage.setItem(key, value);

      // Search

  var item = localStorage.getItem(key);

   2. Remove

         localStorage.removeItem(key);

                localStorage.clear();

 

 

 

 * Storage Event

   1. 영역이 변경될 때 마다 발생. 몇 가지 속성을 지님.

    1-1)storageArea : 세션인지 로컬인지 알려줌.

  1-2)key  : 변경된 키

  1-3)oldValue : 키의 이전값

  1-4)newValue : 키의 새로운값

  1-5)url  : 키가 변경된 페이지의 url

 

 

 

 

** 세션 스토리지는 브라우저 종료시 값이 소멸되는데 반해, 로컬스토리지는 값이 남아있음