0228/Storage, JSON

쌍용교육센터에서 공부한 내용을 정리하며 기록하는 글이고 주관적인 생각이 들어갈 수 있습니다.
잘못된 내용이나 피드백 및 생각 공유는 언제든 환영입니다.
댓글로 남겨주시면 확인 후 수정하겠습니다.
내용에 대한 소스 코드는 https://github.com/2jaehoon/html에 올려두었습니다.

 

부모창에서 자식창으로 값 전달

  - web browser에 따라 전달되는 브라우저도 있다.( IE )

//1. popup 창을 변수에 저장
var subWin=window.open("URL","id","attributes");
//2. 변수를 사용하여 값 전달
변수명.window.document.자식창폼이름.control명.value=값;

 

* JSP를 사용하여 parameter로 값을 전달하면 브라우저에 상관없이 값 전달이 가능하다.

//자식창에서 부모창으로 값 전달
//opener - 부모창 : opener.window.document.폼 이름.control명.value = 값;
opener.window.document.frm.id.value = id;

 

 

history 객체

  - 웹 브라우저에 저장된 방문한 페이지를 사용하는 객체
  - 웹 브라우저가 동작하는 경우에만 작동한다.( 웹 브라우저가 종료되면 사라진다. )
  - 속도향상( 웹 브라우저는 사용자가 방문한 웹사이트의 HTML를 저장한다.

    뒤로 가기나 앞으로 가기 버튼을 클릭하면 서버에 요청하지 않고, 저장된 HTML을 보여준다.)

// 뒤로가기
window.history.back();   
// 앞으로 가기
window.history.go( 이동할 history수 );

 

Storage

  - HTML5에서 제공되는 객체
  - 접속자의 정보를 접속자의 web browser에 저장하는 기술
  - localStorage, sessionStorage 두 가지를 제공.
  - window객체에서 제공
  - 접속자 개인을 식별하는 개인화에 사용된다. 
  - 접속자 컴퓨터에 정보가 저장되므로 접속자가 삭제,변경할 수 있다. ( 중요정보는 저장하지 않는다. )

* sessionStorage

  - 접속자의 웹 브라우저가 열려있는 동안에만 유지되는 storage
  - 접속자의 정보를 다음 번 접속에 사용할 수 없다.( 웹 브라우저가 종료되면 삭제된다. )
  - 키와 값의 쌍으로 이루어져 있다.
  - Cookie와 다르게 다양한 데이터형을 저장할 수 있다.

// 1. 객체 얻기
var ss=window.sessionStorage;

// 2. 값 설정
ss.setItem(키,값);

// 3.값 얻기 
var value=ss.getItem( 키 );

// 4. 값 삭제
ss.removeItem( 키 );

// 5. storage에 저장된 모든 값 삭제
ss.clear();

 

 

* localStorage

  - 접속자의 웹 브라우저가 종료되어도 유지되는 storage
  - 접속자의 정보를 다음 번 접속에 사용할 수 있다.
  - 키와 값의 쌍으로 이루어져있다.

// 1. 객체 얻기
var ls = window.localStorage;

// 2. 값 설정
ls.setItem(키,값);

// 3.값 얻기 – 키가 없다면 null이 나옴
var value = ls.getItem( 키 );

// 4. 값삭제
ls.removeItem( 키 );

// 5. storage에 저장된 모든 값 삭제
ls.clear();

JSON( JavaScript Object Notation )

  - 값들을 가진 객체
  - 문자열, 숫자, 불린, 함수을 저장하고 사용할 수 있다.
  - 이름과 값의 쌍
  - 저장된 데이터는 이름을 사용하여 얻을 수 있다.( parsing data )
  - JSONObject과 JSONArray로 사용할 수 있다.

{ 이름: 값... } 
// 문자열 – "a", ''
// 숫자 – 3, 3.3
// 불린 – true, false
// 함수 – function (){         }

 

  - javascript에서 문자열형식의 JSONObject를 생성해서 사용할 때에는

    eval()함수를 사용한다.

var obj=eval("("+ data+ ")");//문자열로 된 JSONObject객체

 

* JSONObject

  - JSON의 문법으로 만들어진 값을 가진 객체
  - 여러 개의 값을 묶어서 사용할 수 있다.
  - { 이름: 값... }

//문자열사용
//1. JSONObject형식의 문자열을 선언
var data="{ 이름 : 값... }";

//2. eval()를 사용하여 문자열을 JSONObject 생성
    var jsonObj=eval("("+ data + ")");

//{}를 열어서 사용 ( eval 함수를 사용하지 않는다. )
//JSONObject 형식으로 데이터 생성
var jsonObj={ 이름:값... };

 

  - 값 얻기

// 문자열, 숫자, 불린
JSON객체명.이름
// 함수
JSON객체명.이름(); // ()를 넣지 않으면 함수의 내용이 문자열로 출력

 

  - 값 추가

JSON객체명.추가할이름=값;

  - 값 삭제

delete JSON객체명.삭제할이름;