본문 바로가기
Program

웹스토리지 , Web Storage

본문

쿠키
 4KB의 저장 용량, 크기가 작다. 
 같은 사이트내에서 둘 이상의 탭을 열었을 때, 둘 이상의 트랜젝션 추적에 어려움이 있다.
 이 외에도 여러 보안문제가 있다. 
 
웹 스토리지
 사양에 따르면 크기 제한이 없다.
 서버로 보내지 않는다.(원하면 명시적으로 보낼 수 있다.)
 유효기간이 없다.
 JavaScript 객체를 저장할 수 있다.(정확하게는 객체의 복사본이 저장된다.)
 웹 스토리지에는 Session Storage와 Local Storage가 있다.


Session Storage
- 도메인마다 따로 생성된다.
- 윈도우(window 객체)와 같은 유효범위와 생존기간을 가진다. (같은 도메인이라도 윈도우마다 따로 생성된다.)
- 윈도우 복제로 생성된 경우, 스크립트를 이용해 새 창을 연 경우 같은 값을 가진 세션 스토리지가 "복제"된다.
- 새로 생성된 윈도우와 기존 윈도우의 세션 스토리지는 서로 영향을 주지 않는다.

Local Storage
- 도메인마다 따로 생성된다.
- 지속기간에 제한이 없다. 사용자가 명시적으로 지우지 않는 한 영구적으로 저장된다.
- 도메인이 다르면 서로의 로컬 스토리지에 접근할 수 없다. (hi.croute.me와 hello.croute.me는 다른 로컬 스토리지)
- 같은 도메인, 예를들면 croute.me에 소속된 웹페이지는 모두 같은 로컬 스토리지를 가진다.(접근한다.)
- Cookie를 이용한 사이트 고유 설정 정보등을 대신하기에 적당하다.

세션과 로컬의 차이점은 로컬은 지속성(보존)을 가지기 때문에 여러 창을 켜도 같은 도메인이라면, 같은 스토리지를 사용하는 것입니다.
세션 스토리지는 각 세션마다 새로운 스토리지를 사용하고 폐기합니다.

메소드  설명
 length  스토리지에 저장된 데이터의 수를 반환
 key(index)  지정된 인덱스의 키를 반환하고 키가 없다면 null 반환
 getItem(key)  지정된 키에 대응하는 데이터를 반환
 setItem(key, data)  지정된 키로 스토리지에 데이터를 저장
 removeItem(key)  지정된 키에 대응하는 데이터를 삭제
 clear()  모든 데이터를 스토리지에서 삭제


// 저장
localStorage.croute = "good job";
localStorage["croute"] = "good job";
localStorage.setItem("croute", "good job");
 
// 읽기
var croute = localStorage.croute;
var croute = localStorage["croute"];
var croute = localStorage.getItem["croute"];
 
// 삭제
delete localStorage.croute;
delete localStorage["croute"];
localStorage.removeItem("croute");

    localStorage.setItem('name', 'arman');
    localStorage.removeItem('name');
    var value = localStorage.getItem('name');
    alert(value);


for(var i = 0; i < localStorage.length; i++)
{
    var key = localStorage.key(i);
    var value = localStorage[key];
}


  1. localStorage.clear();  
  2.   
  3. localStorage.setItem("title""Mr.");  
  4. localStorage.setItem("fullname""Aaron Darwin");  
  5. localStorage.setItem("age", 17);  
  6. localStorage.setItem("height", 182.5);   
  7.   
  8. for(var i = 0; i < localStorage.length; i++)  
  9. {  
  10.     var keyName = localStorage.key(i);  
  11.     var value = localStorage.getItem(keyName);  
  12.   
  13.     alert(keyName + " = " + value);  


  14.  

  1. var imageObject = new Image("http://www.google.com/logo.gif");  
  2. localStorage.setItem("image", imageObject); 


  1. var integerVariable = 34;  
  2. localStorage.setItem("age"[이 게시물은 듀라님에 의해 2015-04-03 10:08:13 워드프레스에서 이동 됨]
[이 게시물은 듀라님에 의해 2015-04-03 10:27:24 Public에서 이동 됨]
[이 게시물은 듀라님에 의해 2015-04-03 10:33:53 팁과강좌에서 이동 됨]
[이 게시물은 최고관리자님에 의해 2017-06-10 14:26:27 Mobile에서 이동 됨]
0 0
  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

l2j (121.♡.101.20) 작성일11-10-12 01:59 조회1,371회 댓글0건

댓글목록

등록된 댓글이 없습니다.

Program 목록

게시물 검색

사이트 정보

  • 회사명 회사명 / 대표 대표자명
  • 주소 OO도 OO시 OO구 OO동 123-45
  • 사업자 등록번호 123-45-67890
  • 전화 02-123-4567 / 팩스 02-123-4568
  • 통신판매업신고번호 제 OO구 - 123호
  • 개인정보관리책임자 정보책임자명

고객센터

  • 02-1234-5678
  • abc@abc.com
  • 월-금 am 11:00 - pm 05:00
  • 점심시간 : am 12:00 - pm 01:00
  • 주말&공휴일은 1:1문의하기를 이용하세요.
상단으로