Client 에서 정보를 저장하고 사용하기 위해서 전통적으로 cookie 를 많이 사용했었죠.
HTML5 이 대두 되면서 더 좋은 기술들이 나오고 있습니다.
그래서 cookie 랑 localStorage 맛보기 들어 갑니다.
그냥 단순히 작성한 코드니까 확장이나 응용, 활용은 각자의 몫입니다. ^^
[Cookie]
- 이전 글 참고 부탁 하며,
-
http://jjeong.tistory.com/528
var COOKIE = {
set : function(k, v, e, t) {
var expireDate = new Date();
var cookieValue;
if (t == '') {
t = CONSTANT.COOKIE_EXPIRE_DAY;
}
switch (t) {
case CONSTANT.COOKIE_EXPIRE_DAY:
expireDate.setDate(expireDate.getDate() + e);
break;
case CONSTANT.COOKIE_EXPIRE_DAY:
expireDate.setTime(expireDate.getTime() + (e * 60 * 60 * 1000));
break;
default:
expireDate.setDate(expireDate.getDate() + e);
}
if (e) {
cookieValue = escape(v) + '; expires=' + expireDate.toGMTString();
} else {
cookieValue = escape(v);
}
document.cookie = k + '=' + cookieValue + '; path=/';
},
get : function(k) {
var cookies = document.cookie.split(';');
var i, key, val, size, idx;
size = cookies.length;
for (i = 0; i < size; i++) {
idx = cookies[i].indexOf('=');
key = cookies[i].substr(0, idx);
val = cookies[i].substr(idx + 1);
key = key.replace(/^\s+|\s+$/g, "");
if (key == k) {
return unescape(val);
}
}
return false;
},
del : function(k) {
this.set(k, '', -1);
}
}
var LOCALSTORAGE = {
set : function (k, v) {
//localStorage[k] = v;
localStorage.setItem(k,v);
},
get : function (k) {
//return localStorage[k];
return localStorage.getItem(k);
},
del : function (k) {
localStorage.removeItem(k);
},
clear : function () {
localStorage.clear();
}
}
- 둘 다 client 단에서 정보를 read/write 하기 위해서 만들어 졌습니다.
- Code 크기만 보더라도 localStorage 가 훨씬 짧죠.. 그리고 더 직관적이고 사용하기 아주 쉽습니다.
- 각 코드에는 exception 처리가 포함되어 있지 않습니다. biz 나 service layer 에서 처리를 하시면 되겠죠.
- Web Storage 도 localStorage 와 sessionStorage 가 있습니다.
- Cookie 랑 비교하면 persistence cookie == localStorage, temporary cookie == sessionStorage 정도 되겠내요.
- 성능적인 부분에서도 localStorage 가 월등 합니다.
[참고사이트]
-
http://dev.w3.org/html5/webstorage/
-
http://www.w3schools.com/html5/html5_webstorage.asp
-
https://developer.mozilla.org/en/DOM/Storage
[W3C Web Storage Interface]
interface Storage {
readonly attribute unsigned long length;
DOMString? key(unsigned long index);
getter DOMString getItem(DOMString key);
setter creator void setItem(DOMString key, DOMString value);
deleter void removeItem(DOMString key);
void clear();
};
