Storage

HTML5에서 제공하는 WebStorage인 로컬스토리지와 세션에 대해서 간단히 알아보겠습니다.

*WebStorage - 데이터를 클라이언트에 저장

localStorage 

- 직접 지우지 않으면 만료기간이 없음

- 도메인마다 별도로 로컬스토리지 생성

sessionStorage

- 세션이 끝나면 종료

- 브라우저 종료시 세션종료

- 브라우저가 다르면 서로 다른영역

- 도메인마다 별도로 세션스토리지 생성

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

(JavaScript)

localStorage 사용 방법

//로컬스토리지 저장

localStorage.loginId = value;

localStorage.setItem("key", value);

//특정 로컬스토리지 불러오기

localStorage.loginId;

localStorage.getItem("key");

//전체 로컬스토리지 데이터 불러오기

localStorage.getItem(); 

//특정 로컬스토리지 삭제

localStorage.removeItem("key");

//로컬스토리지 전체 삭제

localStorage.clear();

sessionStorage 사용 방법

//세션 저장

sessionStorage.setItem("key", value);

//특정 세션 값 불러오기

sessionStorage.getItem("key");

//특정세션 삭제

sessionStorage.removeItem("key");

//세션 전체 삭제

sessionStorage.clear();

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

(Java)

sessionStorage 사용 방법

public String intro( HttpServletRequest req, HttpServletResponse res){

//세션 생성

req.getSession().setAttribute("key", value);

//세션 값 반환

req.getSession().getAttribute("key");

//세션 값 반환 없으면 세션생성

req.getSession();

req.getSession(true); // 위에꺼와 같음

//세션 값 반환 없으면 null 반환

req.getSession(true); 

}

public void filter(ServletRequest req, SercletResponse res){

HttpSession session = request.getSession();

}

// 세션종료 모두삭제

session.invalidate(); 

// Key인 세션 제거

session.removeAttribute("key"); 

// 세션 속성의 이름들을 Enumeration 객체 타입으로 리턴

session.getAttributeNames();  

// 1970년 1월 1일 0시 0초를 기준으로 하여 현재 세션이 생성된 시간까지 경과한 시간을 계산하여 1/1000초 값으로 리턴

session.getCreationTime();

js/jquery - selectBox controller ( 셀렉트박스 제어 )

selectBox option selected  ( 셀렉스박스 옵션 선택 ) 

// #id인 selectBox에서

// selectBox의 value 값이 menu1 인 값 선택

$("#id").val("menu1").prop("selected", true); 

// #id인 selectBox에서

// selectBox의 첫번째 옵션 값 선택

$("#id option:eq(0)").prop("selected", true); 

selectBox option append ( 셀렉트박스 옵션추가 )

$("#id").append("<option value='menu1'>Pizza</option>");

selectBox option replace ( 셀렉트박스 옵션변경 )

$("#id option:eq(1)").replaceWith("<option value='menu2'>Hotdog</option>");

selectBox option remove ( 셀렉트박스 옵션제거 )

$("#id option:eq(0)").remove();

// 셀렉트박스 처음/마지막 option 삭제

$("#id option:first").remove();

$("#id option:last").remove();

selectBox selected option text /value / index ( 셀렉트박스 선택된 옵션의 text / value / index )

$("#id option:selected").text();

$("#id option:selected").val();

$("#id option").index($("#id option:selected"));

selectBox option size ( 셀렉트 박스 옵션 갯수)

$("#id option").size();

// 선택된 옵션 이전/이후의 옵션 갯수

$("#id  option:selected").prevAll().size();

$("#id option:selected").nextAll().size();

jquery 에서 제공하는 $.isNumeric( ) 를 사용하며 숫자 체크했습니다. 

$.isNumeric( ) 는  ( )안에 값을 넣어주면 숫자인지 아닌지 체크해서 true / false 로 반환해줍니다.

$.isNumeric( "102" ); -> true 

$.isNumeric( " 100" ); -> true 

$.isNumeric( " 100#" ); -> false

$.isNumeric( "10dd" ); -> false

$.isNumeric( "dd" ); -> false

사용해봤는데 위와같은 결과가 나왔습니다. 

그외에도 16진수, 소수점, +-등도 true로 반환합니다.

그래서 이거를 사용해서 문자와 숫자의 섞인값에 숫자에만 #숫자# 형식으로 바꾸는 것을 만들어봤습니다.

var selKeyword = "경기도, 26, 100";

// ,가 들어가면 공백을 제거해주고 구분자인 ,을 공백으로 구분을 바꿔줍니다.

if(selKeyword.indexOf(",") != -1 ){

selKeyword = selKeyword.replace(/ /gi, '');

selKeyword = selKeyword.replace(/,/gi,' ');

}

// 그러면 값이 sleKeyword = "경기도 26 100"; 됩니다.

// 구분자가 있는경우 split함수를 사용해서 배열로 저장후 

// for문을 돌려서 $.isNumeric( )로 숫자인지 확인을 하고 숫자이면 ##을 넣어줬습니다.

if(selKeyword.indexOf(" ") != -1 ){

var selList = selKeyword.split(" ")

for(var i=0; i<selList.length; i++){

if($.isNumeric( selList[i] )){

selList[i]= "#"+selList[i]+"#";

}

if(i == 0){

selKeyword = selList[i];

} else {

selKeyword += " "+selList[i];

}

}//for

}//if

자바스크립트 - 스크립트 내에서 HTML 테이블 생성

자바스크립트

function 함수1(){

var htmlStr = "";

htmlStr += "<table>";

// jquery를 이용한 JSON 결과 데이터 파싱

$(jsonStr.results.juso).each(function(){

htmlStr += "<tr>";

htmlStr += "<td>"+this.zipNo+"</td>";

htmlStr += "<td>"+this.roadAddrPart1+this.roadAddrPart2+"</td>";

htmlStr += "<td><input type=\"button\" onclick=\"함수()\"></td>";

htmlStr += "</tr>";

});

htmlStr += "</table>";

// 결과 HTML을 FORM의 결과 출력 DIV에 삽입

$("#list").html(htmlStr);

}

JSP - HTML

<div id="list"> <!-- 검색 결과 리스트 출력 영역 --> </div>

replace(치환)

var 변수;

변수.replace(,);

g : 모든 패턴 체크(global)

i : 대소문자를 구별없이 체크

m : 여러줄 체크

^ : 처음

$ : 끝

. : 한문자

.replace(' ','')          : 첫번째 공백 제거

.replace(/\-/g,'')        : - 제거

.replace(/[-]/g,'')        

.replace(/,/g,'')         : , 제거

.replace(/^\s+/,'')       : 앞의 공백 제거

.replace(/\s+$/,'')       : 뒤의 공백 제거

.replace(/^\s+|\s+$/g,'') : 앞뒤 공백 제거

.replace(/\s/g,'')        : 문자열 내의 모든 공백 제거

2가지 이상사용시 .replace(/[-]|\s/gi, ''); 등으로 |(or)을 가지고 사용가능 (-,공백제거)

정규표현식

var Patten = /^[0-9\-]{12,12}$|^[0-9]{10,10}$/;   // 0~9의 숫자와 특수문자 -사용가능한 12자리수 or 0~9의 숫자의 10자리수

var Patten = /^[a-zA-Z0-9]{1,20}$/;   // a~z,A~Z,0~9인 1~20자리수까지

var Patten = /^.*(?=^.{8,15}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*$/;  // 영문,숫자,특수문자로 이루어진 8~15자리 (비밀번호에 많이사용)

테스트시

var test="abc1234";

if( !Patten.test( test ) ){}