0228 국비 수업 JavaScript Storage(sessionStorage, localStorage) JSON JSONObject eval 함수

*Storage

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

멱등성: 웹은 접속한 모든 사람에게 동일한 화면이 동일하게 보임

>개인화 서비스: 접속한 사람이 다를 때 다른 화면이 보이는 것 / 멱등성에서 특정 부분을 바꾸는 것

*sessionStorage

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

쿠키: 문자열만 저장 가능
storage: 문자열,숫자,불린.. (쿠키의 상위 호환)

사용법)

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.값 얻기

var value=ls.getItem( 키 );

4. 값 삭제

ls.removeItem(키);

5. storage에 저장된 모든 값 삭제

ls.clear();

<변수 없이 사용하는 경우>

1.값 설정
localStorage.setItem(키,값)

2. 값 얻기
var value=localStorage.getItem(키);

3. 값 삭제
localStorage.removeItem( 키 )

4. 모든 값 삭제.
localStorage.clear();

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


<script type="text/javascript">

/* 아이디 저장이 checked된 상태로 로그인이 눌리면 다음 번에 접속했을 때 text에 이전에 넣은 아이디가 들어있고, 체크박스 상태가 checked 
 * 아이디 저장이 checked되지 않은 상태로 로그인 눌리면 다음번 접속 시 비어있는 text와 checkbox 비어있고 해제된 상태로 보여야 함
 */

 
 window.onload=function(){ //페이지 로딩 시
	
	 var chk = localStorage.getItem("chk");
	 
	 if(chk){ //checked되어있다면
		var obj = document.frm;
		obj.id.value=localStorage.getItem("id"); //스토리지에 저장된 값으로 text 설정
		obj.saveId.checked = chk; // 스토리지에 저장된 값으로 checkbox 설정
		 
	 }//end if
	
}//function
 


function saveId1(){
	
	var obj = document.frm;

	
	//체크박스가 체크 되었는지
	if(obj.saveId.checked) { //checked이고
		
		if(obj.id.value!="") //text가 empty가 아니면
			localStorage.setItem("id",obj.id.value); // 로컬 스토리지 id에 text값 저장
		}//end if
        
       localStorage.setItem("chk",obj.saveId.checked);


	} else { //checked가 아니라면
 
		localStorage.removeItem("id"); //로컬 스토리지에서 삭제
		localStorage.removeItem("chk");
	
	}//end else
 
 
}//saveId1

</script>


</head>
<body>
<form name="frm">
<input type="text" name="id" id="id" class="inputBox"/> 
<input type="checkbox" name="saveId" id="saveId"/>아이디 저장
<br/>

<input type="button" value="로그인" id="btn" class="btnBorder" onclick="saveId1()"/> 
</form>

</body>
</html>

*JSON(JavaScript Object Notation)

- 값들을 가진 객체
- 문자열, 숫자, 불린, 함수를 저장하고 사용할 수 있음

(함수: first class function (data로 취급))
- 이름과 값의 쌍
- 저장된 데이터는 이름을 사용하여 얻을 수 있음 => parsing data
- JSONObject과 JSONArray로 사용할 수 있음

형식)

   { 이름: 값,,,,,,, }

값:

문자열 – “a”, ‘a’
숫자 – 3, 3.3
불린 – true, false
함수 – function (){
}

- javascript에서 문자열 형식의 JSONObject를 생성해서 사용할 때에는 eval()함수를 사용함 (evaluation)

사용법)

var obj=eval(“(“+ data+ ”)”);

//data: json객체 형식의 문자열  
// "{ 이름:값, 이름:값, ,,,, }"

*JSONObject

- JSON의 문법으로 만들어진 값을 가진 객체
- 여러 개의 값을 묶어서 사용할 수 있음

형식)

{ 이름: 값,,,, }

사용법)

- 문자열 사용

eval 함수 사용 : eval()를 사용하여 문자열을 JSONObject 로 생성

1. JSONObject형식의 문자열을 선언
var data=“{ 이름 : 값,,, }”;

2. JSONObject 생성
var jsonObj=eval(“(“+ data + ”)”);
{ }를 열어서 사용 : JSONObject 형식으로 데이터 생성
var jsonObj={ 이름:값 ,,,, } ;

-값 얻기

-값: 문자열, 숫자, 불린
JSON객체명.이름

-함수

JSON객체명.이름();

-값 추가

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

-값 삭제

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


<script type="text/javascript">

function useJson(){
	
	//JSONObject의 사용
	//1.JSONObject 형태의 문자열 사용 (JavaScript Object Notation)
	// "{이름:값, ,,,}"
	
	var data = "{name:'윤oo', age:20 }"; // 쌍따옴표니까 문자열
	//alert(typeof(data));
	
  	//eval함수를 사용하면 입력된 문자열>객체로 생성
	var jsonObj = eval( "("+data+ ")" ); //evaluation
	//alert(typeof(jsonObj));
	
    
	
	//2. 사용 parsing(잘라다가 쓰는 것) : json객체명.이름 < 값을 꺼내서 쓸 수 있음
	//alert(jsonObj.name+" / "+typeof(jsonObj.age));
	
	
	var json ={name:"박oo",age:25,addr:function(){return "서울시 강남구 역삼동"}};
	//alert(typeof(json));
	
    
    
	var obj=document.frm;
	//JSONObject의 값을 parsing하여 HTML Form Control에 설정
	
	//값 삭제: delete json객체명.이름;
	alert("삭제 전 이름: "+json.name);
	delete json.name;
	alert("삭제 후 이름: "+json.name); //undefined
	
	
	obj.name.value=json.name;
	obj.age.value=json.age;
	
	
	//함수명만 사용하면 함수의 내용이 문자열로 출력
	obj.addr.value=json.addr; //함수명만 쓰면 함수 내용이 문자열로 나오니까 주의
    
	//함수 기호를 써주면 -함수명() // 함수가 호출되어 일을 함
	obj.addr1.value=json.addr(); 
	
    
	
	//값 추가: 생성된 JSONObject에 값 추가 jsonObject명.이름=값;
	json.height=182.3;
	//alert("키는: "+json.height);
	
    
	//값 삭제: delete json객체명.이름;
	delete json.name;
	alert("삭제 후 이름: "+json.name);
	
	
}//useJson



</script>




</head>
<body>


<input type="button" value="JSONObject" class="btnBorder" onclick="useJson()"/>

<form name="frm">
<input type="text" name="name" class="inputBox"/><br>
<input type="text" name="age" class="inputBox"/><br>
<input type="text" name="addr" class="inputBox"/><br>
<input type="text" name="addr1" class="inputBox"/><br>
</form>

</body>
</html>

저작자표시 비영리 변경금지 (새창열림)

'👩‍💻 국비 수업 > JavaScript' 카테고리의 다른 글

0303 국비 수업 JavaScript jQueryObject 함수(css, events, effect) HTML Form Control(val, focus, focusin, focusout) (0)	2023.03.04
0302 국비 수업 JavaScript JSONArray 복합 형태 closure jQuery CDN jQuery 로딩(document, window) jQuery Selector(id, class, tag, multiple, attribute, sub, hover함수) (0)	2023.03.04
0227 국비 수업 JavaScript 이벤트처리(익명함수, 기명함수 사용) 자바스크립트의 객체(location, history) 키보드 이벤트처리 popup창 열기 confirm dialog 다음 우편번호 API (0)	2023.02.28
0224 국비 수업 JavaScript select의 값 얻기 JavaScript에서 발생한 값을 HTML Form Control 설정(value, checked, selected) (0)	2023.02.26
0223 국비 수업 JavaScript 날짜함수 HTML Form Control의 값 얻기(id속성, name속성) (1)	2023.02.24

*Storage

*sessionStorage

1. 객체 얻기

2. 값 설정

3.값 얻기

4. 값 삭제

5. storage에 저장된 모든 값 삭제

*localStorage

1. 객체 얻기

2. 값 설정

3.값 얻기

4. 값 삭제

5. storage에 저장된 모든 값 삭제

*JSON(JavaScript Object Notation)

*JSONObject

- 문자열 사용

-값 얻기

-함수

-값 추가

-값 삭제

'👩‍💻 국비 수업 > JavaScript' 카테고리의 다른 글

티스토리툴바