쿠키
 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];
}


view plaincopy to clipboardprint?
  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. } 

     

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


view plaincopy to clipboardprint?
  1. var integerVariable = 34;  
  2. localStorage.setItem("age", integerVariable);  
  3. var newVariable = localStorage.getItem("age");  
  4.   
  5. alert(typeof(newVariable) == "number");  


view plaincopy to clipboardprint?
  1. var integerVariable = 34;  
  2. localStorage.setItem("age", integerVariable);  
  3. var newVariable = parseInt(localStorage.getItem("age"));  
  4.   
  5. alert(typeof(newVariable) == "number");  


view plaincopy to clipboardprint?
  1. if (window.addEventListener) {  
  2.     window.addEventListener("storage", handleStorageChange, false);  
  3. }  
  4. else  
  5. {  
  6.     window.attachEvent("onstorage", handleStorageChange);  
  7. }  
  8.   
  9. function handleStorageChange(event)  
  10. {  
  11.     alert("Something was changed in the local storage");  
  12. }  


view plaincopy to clipboardprint?
  1. interface StorageEvent : Event {  
  2.     readonly String <strong>key</strong>;  
  3.     readonly Object <strong>oldValue</strong>;  
  4.     readonly object <strong>newValue</strong>;  
  5.     readonly String <strong>url</strong>;  
  6. }; 

view plaincopy to clipboardprint?
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta name="viewport" content="width=240,user-scalable=no" />  
  5.         <style>  
  6.             * { padding: 0px; margin: 0px; font-family: "Lucida Sans", "Tahoma", san-serif, arial; }  
  7.             body { background: #333; }  
  8.             h1 {  font-size: 20px;  }  
  9.             p { padding: 5px; margin-bottom: 10px; font-size: 12px; }  
  10.             button { padding: 4px; margin-top: 10px; }  
  11.             #wrap { width: 240px; background: #FFF; margin: 0px auto; padding: 10px; }  
  12.             #blocks .unchecked, a { height: 40px; width: 40px; margin: 4px; display: inline-block; cursor: pointer; text-align: center; line-height: 40px; }  
  13.             #blocks .unchecked { background: #000; }  
  14.             #blocks .unchecked:hover { background: #333; }  
  15.         </style>  
  16.   
  17.         <script>  
  18.             var colorTable = {  
  19.                 "0" : "blue",  
  20.                 "1" : "red",  
  21.                 "2" : "green",  
  22.                 "3" : "orange",  
  23.                 "4" : "purple",  
  24.                 "5" : "brown",  
  25.                 "6" : "gold",  
  26.                 "7" : "lime",  
  27.                 "8" : "lightblue",  
  28.                 "9" : "yellow"  
  29.             };  
  30.   
  31.             function initializeGame()  
  32.             {  
  33.                 if (browserSupportsLocalStorage() == false)  
  34.                 {  
  35.                     alert("This browser doesn't support Web Storage standard");  
  36.                     return;  
  37.                 }  
  38.   
  39.                 var containerDiv = document.getElementById("blocks");  
  40.   
  41.                 for (var i = 0; i < 10; i++)  
  42.                 {  
  43.                     var iid           = i.toString();  
  44.                     var anchor       = document.createElement("a");  
  45.                     anchor.id        = id;  
  46.                     anchor.innerHTML = i + 1;  
  47.   
  48.                     if (localStorage.getItem(id) != null)  
  49.                     {  
  50.                         anchor.style.backgroundColor = colorTable[id];  
  51.                     }  
  52.                     else  
  53.                     {  
  54.                         anchor.className = "unchecked";  
  55.   
  56.                         if (anchor.addEventListener)  
  57.                         {  
  58.                            anchor.addEventListener("click", handleBoxClick, false);  
  59.                         }  
  60.                         else  
  61.                         {  
  62.                            anchor.attachEvent("onclick", handleBoxClick);  
  63.                         }  
  64.                     }  
  65.   
  66.                     containerDiv.appendChild(anchor);  
  67.                 }  
  68.             }  
  69.   
  70.             function handleBoxClick(e)  
  71.             {  
  72.                 var target = (e.target) ? e.target : e.srcElement;  
  73.   
  74.                 if (target.className == "")  
  75.                     return;  
  76.   
  77.                 var id = target.id;  
  78.                 var color = colorTable[id]  
  79.                 target.className = "";  
  80.                 target.style.backgroundColor = colorTable[id];  
  81.   
  82.                 localStorage.setItem(id, color);  
  83.             }  
  84.   
  85.             function resetGame()  
  86.             {  
  87.                 var containerDiv = document.getElementById("blocks");  
  88.                 containerDiv.innerHTML = "";  
  89.                 localStorage.clear();  
  90.                 initializeGame();  
  91.             }  
  92.   
  93.             function browserSupportsLocalStorage()  
  94.             {  
  95.                 return ('localStorage' in window) && (window['localStorage'] != null);  
  96.             }  
  97.         </script>  
  98.     </head>  
  99.     <body onload="initializeGame();">  
  100.         <div id="wrap">  
  101.             <h1>Web Storage Demo</h1>  
  102.             <p>  
  103.                 This page was design to simply demonstrate the use of Web Storage in modern browsers. In this example boxes  
  104.                 that haven't yet been clicked remain black. Once you click a black box, it's real color will be revealed.  
  105.                 The browser however will remember which boxes are clicked, even when you navigate away from this page.  
  106.                 Go on, give it a try.  
  107.             </p>  
  108.             <div id="blocks">  
  109.             </div>  
  110.             <button onclick="resetGame()">Reset Game</button>  
  111.             <button onclick="document.location.reload(true);">Refresh Page</button>  
  112.         </div>  
  113.     </body>  
  114. </html>  

Listing 1. 가장 기본적인 Twitter 검색
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name = "viewport" content = "width = device-width"/>
<title>Basic Twitter Search</title>
<script type="text/javascript">
    function searchTwitter(){
        var query = "http://search.twitter.com/search.json?callback
=showResults&q=";
        query += $("kwBox").value;
        var script = document.createElement("script");
        script.src = query;
        document.getElementsByTagName("head")[0].appendChild(script);
    }
    // ui code deleted for brevity
    function showResults(response){
        var tweets = response.results;
        tweets.forEach(function(tweet){
            tweet.linkUrl = "http://twitter.com/" + tweet.from_user 
+ "/status/" + tweet.id;
        });
        makeResultsTable(tweets);
    }
</script>
<!--  CSS deleted for brevity -->
</head>
<body>
    <div id="main">
        <label for="kwBox">Search Twitter:</label>
        <input type="text" id="kwBox"/>
        <input type="button" value="Go!" onclick="searchTwitter()"/>
    </div>
    <div id="results">
    </div>
</body>
</html>
 

Listing 2. 검색 및 저장하기
function searchTwitter(){
    var keyword = $("kwBox").value;
    var query = "http://search.twitter.com/search.json?callback
=processResults&q=";
    query += keyword;
    var script = document.createElement("script");
    script.src = query;
    document.getElementsByTagName("head")[0].appendChild(script);
}
function processResults(response){
    var keyword = $("kwBox").value;
    var tweets = response.results;
    tweets.forEach(function(tweet){
        saveTweet(keyword, tweet);
        tweet.linkUrl = "http://twitter.com/" + tweet.from_user + "/status/" + tweet.id;
    });
    makeResultsTable();
    addTweetsToResultsTable(tweets);
}
function saveTweet(keyword, tweet){
    // check if the browser supports localStorage
    if (!window.localStorage){
        return;
    }
    if (!localStorage.getItem("tweet" + tweet.id)){
        localStorage.setItem("tweet" + tweet.id, JSON.stringify(tweet));
    }
    var index = localStorage.getItem("index::" + keyword);
    if (index){
        index = JSON.parse(index);
    } else {
        index = [];
    }
    if (!index.contains(tweet.id)){
        index.push(tweet.id);
        localStorage.setItem("index::"+keyword, JSON.stringify(index));
    } 
}
 

그림 1. 로컬로 캐시된 트윗
로컬로 캐시된 트윗 목록 화면 캡처(Key 및 Value 필드가 있음)
Listing 3. 로컬로 먼저 검색하기
function searchTwitter(){
    if ($("resultsTable")){
        $("resultsTable").innerHTML = ""; // clear results
    }
    makeResultsTable();
    var keyword = $("kwBox").value;
    var maxId = loadLocal(keyword);
    var query = "http://search.twitter.com/search.json?callback=processResults&q=";
    query += keyword;
    if (maxId){
        query += "&since_id=" + maxId;
    }
    var script = document.createElement("script");
    script.src = query;
    document.getElementsByTagName("head")[0].appendChild(script);
}
function loadLocal(keyword){
    if (!window.localStorage){
        return;
    }
    var index = localStorage.getItem("index::" + keyword);
    var tweets = [];
    var i = 0;
    var tweet = {};
    if (index){
        index = JSON.parse(index);
        for (i=0;i<index.length;i++){
            tweet = localStorage.getItem("tweet"+index[i]);
            if (tweet){
                tweet = JSON.parse(tweet);
                tweets.push(tweet);
            }
        }
    }
    if (tweets.length < 1){
        return 0;
    }
    tweets.sort(function(a,b){
        return a.id > b.id;
    });
    addTweetsToResultsTable(tweets);
    return tweets[0].id;
}

Listing 4. 상위 10개의 검색 계산하기
function displayStats(){
    if (!window.localStorage){ return; }
    var i = 0;
    var key = "";
    var index = [];
    var cachedSearches = [];
    for (i=0;i<localStorage.length;i++){
        key = localStorage.key(i);
        if (key.indexOf("index::") == 0){
            index = JSON.parse(localStorage.getItem(key));
            cachedSearches.push ({keyword: key.slice(7), numResults: index.length});
        }
    }
    cachedSearches.sort(function(a,b){
        if (a.numResults == b.numResults){
            if (a.keyword.toLowerCase() < b.keyword.toLowerCase()){
                return -1;
            } else if (a.keyword.toLowerCase() > b.keyword.toLowerCase()){
                return 1;
            }
            return 0;
        }
        return b.numResults - a.numResults;
    }).slice(0,10).forEach(function(search){
        var li = document.createElement("li");
        var txt = document.createTextNode(search.keyword + " : " + search.numResults);
        li.appendChild(txt);
        $("stats").appendChild(li);
    });
}

Listing 5. 페이지 초기화하기
window.onload = function() {
    displayStats();
    document.body.setAttribute("onstorage", "handleOnStorage();");
}

Listing 6. 스토리지 이벤트 처리기
function handleOnStorage() {
    if (window.event && window.event.key.indexOf("index::") == 0){
        $("stats").innerHTML = "";
        displayStats();
    }
}

 
 
저작자표시 비영리 동일조건

'HTML & Script' 카테고리의 다른 글

urlencode  (0) 2012.02.01
input 박스에 숫자만 입력  (1) 2011.12.02
encodeURI  (0) 2011.09.27
jQuery 폼유효성검사 간단히  (0) 2011.09.26
[html5]The Root Element  (0) 2011.06.02

+ Recent posts

티스토리툴바