Web Storage 웹 스토로지 관련

 

 

 

 

 

 

 

 

=======================

=======================

=======================

 

 

 

 

 

 

 

 

 

출처: http://kadamon.tistory.com/8

 

COOKIE

쿠키?

쿠키는 클라이언트에 대한 정보를 이용자의 PC의 하드디스크에 보관하기 위해서 웹 사이트에서 클라이언트의 웹 브라우저에 전송하는 정보이다.

 

쉽게 생각하면 통행증 정도로 생각하면 편하다. 로그인 기능을 구현할 때 요즘은 대부분 토큰을 사용한다. 이 토큰은 로그인 시 고유하게 가지고 있는 unique한 값을 가지게 된다. 여기서 토큰을 사람에 대한 신분증 이라고 하자. 옛날에는 다른 도시를 지나가려면 통행증이 필수적으로 필요하다(아니여도 그렇다고 치자) 그러면 이 통행증을 가지고 있으면 그 도시는 언제든지 마음대로 왕복할 수 있다. 통행증을 발급받으려면 신분증이 필요한 것이다.

 

웹에서는 로그인을 하기위해서는 항상 토큰을 발급받는 API를 사용해야 할 것이다. 근데 서비스를 이용하다 보면 토큰을 반드시 매개변수로 보내야하는 경우가 있다. 이런 경우 토큰을 매번 생성한다면 api하나 호출하기 위해서 토큰을 얻는 api를 또 호출하는 쓸데없는 일이 반복된다. 그래서 쿠키라는 통행증을 얻는 것이다.

 

로그인이 성공할 경우 토큰에 해당하는 쿠키를 서버와 클라이언트에 생성하고 클라이언트는 토큰이 아닌 쿠키를 통해 서버에 요청을 하는 것이다. 즉 매번 토큰을 받는 api를 호출할 필요가 없어지는 것이다.

 

Angular2에서 cookie사용하기

npm install angular2-cookie --save로 설치후 사용하면된다.

사용법은 공식 api참조하면 금방사용할 수 있다.

 

 

 

---

WEBSTORAGE ?

 

웹스토리지는 HTML5에서 쿠키의 단점을 보완해서 만든 기술이다. 기본적으로 웹스토리지는 key와 value 형태로 이루어져있다. 쿠키와 마찬가지로 클라이언트에 대한 정보를 저장한다.

웹스토리지와 쿠키의 역할 자체에는 크게 차이가 없다고 생각한다. 하지만 최근에는 웹스토리지가 쿠키보다 효율적이지 않나?라는 의견들이 많다고 한다. 저장용량에서도 쿠키는 4Kb밖에 안되지만 로컬스토리지는 약 5Mb(브라우져마다 차이가 있다고 함)정도 까지 가능하고 서버로 전송을 안하기 때문에 그런 생각들이 많은 것 같다.

 

웹스토리지에서 쿠키의 가장 큰 차이점은 서버에 클라이언트에 대한 데이터를 저장하지 않는 것이다. 웹스토리지는 자기 로컬영역에만 저장을 해두고 해당하는 key값에 해당하는 value값들을 비교 및 유지하는 형식이지만 쿠키는 서버와 자신의 로컬 영역에 저장을 해두고 비교를 할때마다 일종의 쿠키용 api를 만들어 호출하는 방식인 것 같다.

 

---

LocalStorage

로컬스토리지는 웹스토리지의 두 가지 종류 중 하나이다. 클라이언트에 대한 정보를 영구적(강제로 지우지 않는 이상)으로 보관하는 것이 세션스토리지와 큰 차이점 이고 그외에는 모두 동일하다고 한다.

 

Angular2에서 LocalStorage사용하기

npm install angular-2-local-storage --save로 설치후 사용하면된다.

사용법은 공식 api참조

---

SessionStorage

세션스토리지역시 웹스토리지의 종류 두 가지 중 하나이다. 세션스토리지는 로컬스토리지와 다르게 세션이 종료되면(즉 웹브라우저를 닫을 경우) 클라이언트에 대한 정보를 삭제하는 것 이다. 보안이 많이 필요한 녀석일 수록 세션스토리지를 쓰는게 좋을 것으로 생각된다.

 

Angular2에서 LocalStorage사용하기

npm install ng2-webstorage --save로 설치후 사용하면된다.

사용법은 공식 api참조

---

Cookie vs LocalStorage vs SessionStorage

stackoverflow에 최근 자료까지 많은 걸 보면 생각보다 아직까지 꽤나 이슈인 문제라고 생각이든다. 결론부터 말하자면 케바케(case by case)인 것 같다. 각각 서로 장단점이 명확하게 있다.

---

• cookie 장점 : 어지간한 브라우져에는 지원이 다됨
• cookie 단점 : api가 한번 더 호출되므로 서버에 부담증가/ 쿠키자체의 용량이 적음

---

• LocalStorage 장점 : 서버에 불필요하게 데이터 저장안함/ 용량이 큼
• LocalStorage 단점 : HTML4만 지원되는 브라우져라면 지원이 안됨...
• SessionStorage의 장단점은 LocalStorage와 동일하다 LocalStorage와 단지 기능차이일뿐이다.

---

물론 이건 전적으로 굉장히 초보적인 수준으로 바라봤을 때라고 생각한다. 조금 더 파보니까 보안관련된 문제도 꽤 나왔던 것 같다. 각 방법마다 취약한 해킹 방법이 있다고... 근데 뭐 아직 그 정도까지 생각할 단계는 아니니까 ㅎ

보안은 차차 더 알아가보도록 하자(기간은 무제한ㅋ)

 

 

 

 

 

=======================

=======================

=======================

 

 

 

 

 

출처: http://kcizzang.tistory.com/entry/SessionStorage-%EC%99%80-LocalStorage-%EC%B0%A8%EC%9D%B4%EC%A0%90

 

 

WEB STORAGE

 

WEB STORAGE란?

HTML5 에는 웹 사이트의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함되어있습니다. Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴입니다. 그리고 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능합니다. Web Storage는 기존 웹 환경의 쿠키(Cookie)와 매우 유사한 개념입니다. 사실 거의 차이가 없어보일지라도 몇 가지 쿠키의 단점을 극복하는 개선점이 도입되었습니다.

쿠키는 여전히 유효하고 꽤 적절한 클라이언트 저장도구 입니다. HTML5 에서 Web Storage 스펙을 새로 추가했지만 쿠키를 배제하는 것은 아닙니다. HTML5 에서도 여전히 쿠키를 이용할 수 있습니다.

 

Web Storage 차이점

쿠키는 매번 서버로 전송된다.

웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키정보를 포함하여 서버로 전송됩니다. Web Storage 는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어지지 않습니다. 이것은 네트워크 트래픽 비용을 줄여 준다는 주요한 장점이 됩니다.

 

단순 문자열을 넘어(스크립트) 객체정보를 저장할 수 있다.

문자열 기반 데이터 이외에 체계적으로 구조화된 객체를 저장할 수 있다는 것은 개발 편의성을 제공해 주는 주요한 장점이 됩니다. 브라우저의 지원 여부를 확인해 봐야 하는 항목입니다.

 

용량의 제한이 없다

쿠키는 개수와 용량에 있어 제한을 걸어 두고 있습니다. 하나의 사이트에서 저장할 수 있는 최대 쿠키 수는 20개 입니다. 그리고 하나의 사이트에서 저장할 수 있는 최대쿠키 크기는 4KB 로 제한되어 있습니다. Web Storage 는 이러한 제한이 없습니다. 그러나 쿠키도하위키를 이용하면 이러한 제한을 일부 해소할 수 있습니다. 그리고 대부분의 시나리오에서 쿠키의 제한으로 까지 데이터를 저장할 일이 없습니다.

 

영구 데이터 저장이 가능하다

쿠키는 만료일자를 지정하게 되어 있어 언젠가 제거됩니다. 만료일자로 지정된 날짜에 쿠키는 제거되는 것입니다.(만료일자를 지정하지 않으면 세션 쿠키가 됩니다) 만일 영구 쿠키를 원한다면 만료일자를 굉장히 멀게 설정하여 해결할 수 있습니다.

 

WebStorage는 만료기간의 설정이 없습니다. 즉 한번 저장한 데이터는 영구적으로 존재하는 것입니다. 이것이 쿠키와의 차이점입니다. WebStorage와 쿠키의 차이점에 대해서 WebStorage가 특별히 좋은 이유는 없다고 봐도 무방합니다. 다만 한가지 매번 서버로 전송되지 않는다는 특징은 꽤나 유용해 보입니다.

LocalStorage와 SessionStorage

 

Web Storage는 데이터의 지속성과 관련하여 두 가지 용도의 저장소를 제공합니다.

우선 기본적으로 Web Storage는 쿠키와 마찬가지로 사이트의 도메인 단위로 접근이 제한됩니다. 다시 말해 A 도메인에서 저장한 데이터는 B도메인에서 조회할 수 없다는 것입니다. 이것은 데이터의 보안적 측면에서 당연한 원칙이라 하겠습니다.

 

LocalStorage

LocalStorage 저장한 데이터를 (명시적으로) 지우지 않는 이상 영구적으로 보관이 가능합니다. 앞서 말한대로 도메인마다 별도로 로컬 스토로지가 생성됩니다. Windows 전역 객체의 LocalStorage 라는 컬렉션을 통해 저장/조회가 이루어집니다.

 

SessionStorage

SessionStorage는 데이터의 지속성과 액세스 범위에 특수한 제한이 존재합니다. SessionStorage는 windows 전역 객체의 sessionStorage라는 컬렉션을 통해 저장/조회가 이루어집니다.

 

데이터 유지 측면

SessionStorage는 데이터가 지속적으로 보관되지 않습니다. 이는 마치 브라우저 기반 세션 쿠키와 그 성질이 비슷한데, 현재 페이지가 브라우징 되고 있는 브라우저 큰텍스트 내에서만 데이터가 유지됩니다.

LocalStorage는 브라우저를 종료해도 데이터는 보관되어 다음번 접속에도 그 데이터를 사용할 수 있는 반면, SessionStorage는 브라우저가 종료되면 데이터도 같이 지워집니다. 즉 브라우저 종료되면 SessionStorage도 삭제된다는 것입니다.

 

데이터 범위 측면

SessionStorage 역시 Web Storage의 기본 보안 처럼 도메인별로 별도로 생성됩니다. 여기에 더불어 SessionStorage는 같은 사이트의 같은 도메인이라 할지라도 브라우저가 다르면 서로 다른 영역이 됩니다(즉 브라우저 컨텍스트가 다릅니다)

탭 브라우징이나 브라우저를 하나 더 실행해서 같은 페이지를 실행했을 때, 이 두 페이지의 SessionStorage는 각각 별개의 영역으로 서로 침범하지 못한다는 의미입니다.(도메인만 같으면 전역적으로 공유 가능한 LocalStorage와 구분되는 특징이라 하겠습니다.)

 

WebStorage의 보안은 서로 다른 도메인의 데이터 침범을 막고는 있지만 클라이언트, 즉 사용자를 막고 있지는 않습니다. 클라이언트는 얼마든지 저장된 값을(임의로)수정이 가능합니다. 이것은 쿠키와 동일한 개념입니다. 그렇다고 쿠키에 비해 별다른 보안 취약점을 더 가진 것은 아닙니다. 따라서 개발자는 사용자에 의한 이러한 임의 변경에 항상 예의 주시하고 방어 코드의 작성을 잊지 말아야 하겠습니다.

 

sns신고

출처: http://kcizzang.tistory.com/entry/SessionStorage-와-LocalStorage-차이점 [정윤문경아빠의 이야기]

 

 

 

 

 

=======================

=======================

=======================

 

 

 

 

 

 

 

반응형

 

 

728x90

 

 

 

 

 

출처: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

 

 

The sessionStorage property allows you to access a session Storage object for the current origin. sessionStorage is similar to Window.localStorage, the only difference is while data stored in localStorage has no expiration set, data stored in sessionStorage gets cleared when the page session ends. A page session lasts for as long as the browser is open and survives over page reloads and restores. Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work.

It should be noted that data stored in either sessionStorage or localStorage is specific to the protocol of the page.

Syntax

// Save data to sessionStorage sessionStorage.setItem('key', 'value');  // Get saved data from sessionStorage var data = sessionStorage.getItem('key');  // Remove saved data from sessionStorage sessionStorage.removeItem('key');  // Remove all saved data from sessionStorage sessionStorage.clear();

Value

A Storage object.

Example

The following snippet accesses the current domain's session Storage object and adds a data item to it using Storage.setItem().

sessionStorage.setItem('myCat', 'Tom');

The following example autosaves the contents of a text field, and if the browser is accidentally refreshed, restores the text field content so that no writing is lost.

// Get the text field that we're going to track var field = document.getElementById("field");   // See if we have an autosave value // (this will only happen if the page is accidentally refreshed) if (sessionStorage.getItem("autosave")) {   // Restore the contents of the text field   field.value = sessionStorage.getItem("autosave"); }   // Listen for changes in the text field field.addEventListener("change", function() {   // And save the results into the session storage object   sessionStorage.setItem("autosave", field.value); });

Note: Please refer to the Using the Web Storage API article for a full example.

 

 

 

 

 

=======================

=======================

=======================

 

 

 

 

 

 

출처: https://stackoverflow.com/questions/15804462/how-to-clear-localstorage-sessionstorage-and-cookies-in-javascript-and-then-ret

 

 

How to completely clear localstorage, sessionStorage and cookies in javascript ?

Is there any way one can get these values back after clearing them ?

 

how to completely clear localstorage

localStorage.clear();

how to completely clear sessionstorage

sessionStorage.clear();

[...] Cookies ?

var cookies = document.cookie;  for (var i = 0; i < cookies.split(";").length; ++i) {     var myCookie = cookies[i];     var pos = myCookie.indexOf("=");     var name = pos > -1 ? myCookie.substr(0, pos) : myCookie;     document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT"; }

is there any way to get the value back after clear these ?

No, there isn't. But you shouldn't rely on this if this is related to a security question.

 

 

 

 

 

=======================

=======================

=======================

 

 

 

 

 

 

출처: https://vnthf.github.io/blog/localstroage/

 

Local Storage

Local Storage는 HTML5d에서 새로 추가된 스팩입니다. Session storage와 더불어 client-side(브라우저)의 저장소입니다. 쿠키와 기본적인 개념은 비슷하지만 쿠키가 서버와 통신하는것과는 달리 web-storage는 완전히 브라우저에 종속적입니다. 당연히 브라우저별로 다른 저장소를 가지고 운영됩니다.

장점과 단점

web storage를 쓰게 되면 네트워크 부하가 줄어듭니다. 데이터를 캐쉬할 수 있고 쿠기보다 더 쉽게 상태값을 보존 할 수 있습니다. 이전에 포스팅 한 여러기능들과 마찬가지로 네트워크가 끊켰을 때의 작업들을 할 수 가 있습니다. web storage는 String만 key-value로 삽입이 가능하며 도메인 별로 운용이 됩니다. string key value기 때문에 object를 사용하려면 json stringfy, parse를 이용해야 합니다. 기본적으로 브라우저에서 데이터를 모두 볼 수 있고 암호화 되지 않기 때문에 안전한 저장소는 아닙니다. 중요한 정보, 키값등이 있다면 쿠키와 마찬가지로 적합한 장소가 아닙니다. 또한 동기적으로 작동하기 때문에 큰 작업의 경우 file.io가 발생하여 스레드가 블락 될 수 있습니다.

Local Storage Vs Session Storage

그럼 같은 web Storage인 둘의 차이점은 무엇일까요?

지속기간

• Local Storage는 사용자가 직접 지우기전까지는 데이터가 영구적으로 보존됩니다. 그래서 브라우저 별로 데이터를 같이 공유하고 새로운 탭을 열거나 브라우저를 꺼도 데이터가 보존됩니다.
• Session Storage는 탭을 닫거나 브라우저를 종료하면 데이터가 모두 사라집니다.

저장소

• Local Storage는 5mb로 제한되어 있습니다.(일부 브라우저는 늘릴 수 있습니다.)
• Session Storage는 제한이 없습니다.

사용법

사용법은 아주 간단합니다.

window.localStorage.setItem('key',value); //값을 설정합니다. window.localStorage.get('key'); //값을 가져 옵니다. window.localStorage.removeItem('key'); //값을 제거합니다. window.localStorage.clear(); //local storage값을 모두 비웁니다.

보안 이슈

위에서 말했듯이 webstorage는 보안에 적합하지 않습니다. 하지만 암호화를 해야한다면? 아직 webStorage를 위한 암호화 라이브러리는 찾지는 못하였습니다. 하지만 http://www.jksii.or.kr/upload/1/936_1.pdf에 있는 고려대학원의 로컬스토리지 구현에 관한 연구를 보면 어떤식으로 암호화를 적용할것인지에 관하여 적어 놓았습니다. 사실 구현 방법자체는 대부분의 사람들이 생각하는것처럼 암호화하는 래핑객체를 하나 더해서 encrypet하고 decryption 하는 과정입니다. 논문에서는 AES를 통해 구현하였는데 하지 않았을 때보다 성능상 거의 차이가 없다고 합니다. https://code.google.com/p/crypto-js/라는 라이브러리는 자바스크립트에서 암호화 알고리즘을 쓸 수 있도록 해줍니다. 이것을 이용하면 쉽게 구현이 가능할 것입니다. 다만 key값을 어떤식으로 설정하고 어떤 알고리즘을 써서 구현할지는 신중하게 생각해야 할 것입니다.

 

 

 

 

=======================

=======================

=======================

 

 

 

 

 

 

 

출처: https://code.i-harness.com/ko/q/7500f6

 

 

localStorage를 지우려면 다음을 사용하십시오.

localStorage.clear();

 

---

 

 

window.localStorage.clear(); //try this to clear all local storage

 

---

 

 

다음은 예외가있는 모든 localStorage 항목을 제거 할 수있는 함수입니다. 이 함수에는 jQuery 가 필요하다. 요점을 다운로드 할 수 있습니다.

이 clearStorageExcept(['exceptionOne','exceptionTwo']) 와 같이 호출 할 수 있습니다.

clearStorageExcept = function(exceptions){   var storage = localStorage;   var keys = [];   var exceptions = [].concat(exceptions); //prevent undefined    //get storage keys   $.each(localStorage, function(key, val){     keys.push(key);   });    //loop through keys   for( i=0; i<keys.length; i++ ){     var key = keys[i];     var deleteItem = true;      //check if key excluded     for( j=0; j<exceptions.length; j++ ){       var exception = exceptions[j];       if( key == exception ){         deleteItem = false;       }     }      //delete key     if( deleteItem ){       localStorage.removeItem(key);     }   } }

 

---

 

 

위의 모든 것이 작동하지 않는다면? 이 대답은 매력 처럼 작동합니다 . 
https://.com/a/45057698/5902146

 

 

 

 

=======================

=======================

=======================

 

 

 

 

 

 

출처: https://github.com/milooy/TIL/blob/master/JavaScript/Web-Storage.md

 

Web Storage

Web Storage?

HTML5에는 웹사이트 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage스펙이 포함됨. 키-값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 심플한 패턴. 종류는 2가지가 있는데,

• localStorage: 영구저장소
• sessionStorage: 임시저장소 처럼 데이터의 지속성을 구별하여 사용할 수 있다. 브라우저 지원 현황을 보면 현재 오페라 미니 빼고 모두 지원한다.

쿠키와의 차이점

• 쿠키는 맛있다.
• 쿠키는 매번 서버로 전송된다.
  • Web storage는 저장된 데이터가 클라에 존재할 뿐 서버전송은 이루어지지 않는다(=>네트워크 트래픽 비용을 줄여주는 중요한 장점)
• 단순 문자열을 넘어 (스크립트)객체정보를 저장 가능.
  • 체계적으로 구조화된 객체 저장 가능.(브라우저 지원여부 확인 필요)
• 쿠키와 다르게 용량 제한이 없다.
• 영구 데이터 저장이 가능하다.
  • 로컬스토리지는 브라우저 종료해도 데이터 보관, 세션스토리지는 데이터 지움.

사용법

localStorage.setItem('foo', 'bar'); localStorage.getItem('foo'); //'bar' localStorage['foo']; //'bar'  localStorage.removeItem(키); localStorage.clear(); //모두 지움 localStorage.length; //저장된 키의 개수 localStorage.key(값); //값으로 키를 찾음  window.addEventListener('storage', function(e){ //이벤트 처리     // do sth }, false);

• key와 value 모두 String으로 저장된다.
• getItem으로 값 못찾으면, 에러 발생이 아니고 null리턴.
• 대부분의 브라우저에서는 다른 윈도우에서 로컬 스토리지의 데이터를 변경했을 때 이벤트가 발생한다. 즉, 같은 창에 이벤트를 추가하고, localStroage의 값을 변경해도 이벤트가 발생하지 않는다. 아마도, 자신의 window에서는 변경된 상황을 알고 있을 것이라는 가정 때문인가 보다. 링크

세션스토리지 예제

// Get the text field that we're going to track var field = document.getElementById("field");   // See if we have an autosave value // (this will only happen if the page is accidentally refreshed) if (sessionStorage.getItem("autosave")) {   // Restore the contents of the text field   field.value = sessionStorage.getItem("autosave"); }   // Listen for changes in the text field field.addEventListener("change", function() {   // And save the results into the session storage object   sessionStorage.setItem("autosave", field.value); });

localStorage에 json저장

http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstoragehttp://stackoverflow.com/questions/23728626/localstorage-and-json-stringify-json-parse

var testObject = { 'one': 1, 'two': 2, 'three': 3 };  // Put the object into storage localStorage.setItem('testObject', JSON.stringify(testObject));  // Retrieve the object from storage var retrievedObject = localStorage.getItem('testObject');  console.log('retrievedObject: ', JSON.parse(retrievedObject));

localStorage모든 아이템 꺼내오기

http://stackoverflow.com/questions/17745292/all-local-storage-items

function allStorage(){      var archive = [],         keys = Object.keys(localStorage),         i = 0;      for (; i < keys.length; i++) {         archive.push( localStorage.getItem(keys[i]) );     }      return archive; }

Refer

MDN Web Storage API HTML5 Web Storage HTML5 LocalStorage 살펴보기 MDN Storage

 

 

 

 

=======================

=======================

=======================