SharedObject outline 입니다.  기술 관련 문서는 docx 파일을 참고하시면 됩니다.

FireFox 의 globalStorage 과 유사하게 구현했으며 차후 유연한 연동 및 extansion 을 위해서 비슷하게 구현합니다. [docx 파일 내용은 그림 아래 추가했습니다. 그리고 javascript 라이브러리는 추후 공개합니다. ]

Shared-Object 를 잘 활용하면 정말 파워풀(?)한 웹 기반 Application을 만들 수 있겠습니다.
Dojo Toolkit 에서도 localStorage 를 위해 Shared Object를 활용하고 있습니다. (Dojo.Storage)

사용자 삽입 이미지












Shared Object 란 무엇인가?

Shared Object Macromedia flash MX 의 새롭고 강력한 기능입니다. 

Shared Object 를 사용하는 방법은 많이 있고 이 문서는 여러분들에게 기초적인 개념들을 얻게 해줄 것입니다.

Shared Object의 다양한 사용 법은 유저의 점수, 좋아하는 색깔 혹은 마지막 방문했던 곳을 기억하는 것을 포함합니다. 아래의 예제는 사용자에 의해 입력된 이름이 저장되고 여러 번 방문했었던 사이트는 Shared Object의 기능을 사용하게 됩니다.

 

Shared Object 는 클라이언트에 저장된 데이터를 사용합니다. 이것은 데이터가 웹 브라우저를 통하여 생성되어진 쿠키와 유사한 방식으로 저장되어집니다.

 

생성된 그 데이터는 Shared Object에 의해 생성된 같은 도메인에서만 오직 읽을 수 있습니다.

 

이것은 한가지 방법입니다. Macromedia Flash Player 는 유저의 컴퓨터에 데이터를 쓸 수 있습니다.  그들이 정보를 제공하지 않는다면 Shared Object 는 사용자의 이메일 주소 혹은 다른 개인적인 정보를 기억할 수 없습니다.

보안을 위해서 http://download.macromedia.com/pub/flash/whitepapers/security.pdf 이 자료를 더 참조해야 합니다.

 

1.     Using Shared Objects
A. Shared Object
getLocal 메서드를 이용하여 Shared Object를 생성해라.  무비의 myLocalSO 변수를 설정하고 아래의 ActionScript “flashcookie”의 이름을 갖는 Shared Object를 할당한다.

//create the local Shared Object

myLocal_so = sharedobject.getLocal("flashcookie");

만약 “flashcookie” 라는 이름을 갖는 Shared Object가 미리 존재하지 않는다면 Macromedia Flash Player 는 그 이름을 갖는 Shared Object 를 생성할 것입니다.
B. localPath
라 불리는 선택적인 파라미터는 Shared Object 생성을 위해서 또한 설정할 수 있습니다.  localPath 파라미터는 Shared Object 가 사용자 컴퓨터에 저장될 장소를 지정할 수 있습니다.  이 경로는 SWF의 위치와 매치되거나 URL을 함께 포함되어 집니다.
 
그러므로 Movie http://www.mysite.com/movie/movies.swf 라는 localPath 파라미터를 설정했다면 사용자 컴퓨터에 http://www.mysite.com/movie/movies.swf, /, /movies 혹은 /movies/movies.swf 경로에 Shared Object 를 생성한다.

코드는 아래와 같이
myLocal_so = sharedobject.getLocal("flashcookie","/movies/mymovie.swf");

하나의 사이트에서 한 개 혹은 그 이상의 Shared Object를 사용할 때 유용합니다.
예를 들어 localPath 를 루트 레벨로 하여 생성된 Shared Object는 사이트 내의 모든 movie 에서 접근이 가능하게 됩니다. (localPath “/”로 설정한 경우) 그리고 다른 정보들은 각각의 movie 에서 저장한 Shared Object 에서만 접근만 허용합니다. localPath movie 에 지정하게 됩니다. (localPath /movies/mymovie.swf 로 설정한 경우)

2.  Shared Object의 값 설정
정보들은 Shared Object의 데이터 프로퍼티에 할당된 속성에 의해서 저장 되어집니다. 아래의 Movie의 텍스트 입력창에 입력된 사용자 이름은 Shared Object의 데이터 프로퍼티에 할당한 속성과 동일합니다. 아래와 같이 하면 됩니다.

/set the variable “name” equal to the text property
//of the textfield “username”
myLocal_so.data.name = username.text;

//increase the variable counter by one for each visit
myLocal_so.data.counter++;

데이터는 Movie Macromedia Flash Player에서 제거되어질 때 Shared Object에 써집니다. 데이터를 쓰기 위해서 바로 flush 메서드를 아래처럼 사용하면 됩니다.

myLocal_so.flush();

3.     Shared Object 의 값 반환
사용자가 페이지로 되돌아 왔을 때 Shared Object는 읽고 그 값을 표시한다.

userName.text = myLocal_so.data.name;
numVisits.text = “You have been here “ + myLocal_so.data.counter +”times.”


왜냐하면 myLocal_so = Shared Object.getLocal(“flashcookie”); 와 같이 Shared Object “flashcookie”는 이미 사용자 컴퓨터에 생성되어져 있기 때문에 사용자 이름과 방문횟수를 Shared Object에서 데이터를 얻을 수 있는 것입니다.


사용자 삽입 이미지

a.site.com 에서 생성된 데이터(Shared Object)를
b.site.com 에서 사용할 수 있는 방법이나 트릭을 아시는 분든 좀 알려주세요.


관련 정보
wikipedia : http://en.wikipedia.org/wiki/Local_Shared_Object




신고
Posted by Rhio.kim
TGlobalStorage extention 입니다.

FireFox 의 sessionStroage 와 globalStorage 를 호환시켜 크로스 브라우징 localStorage 역활을 할 수 있도록 개발중입니다.

Prototype.js 기반으로 개발하려다.  프레임웤에 의존적으로 작동하면 별 도움이 되지 않는 부분이기에 따로 window 하위 객체로 바로 써버렸습니다.

FF의 sessionStorage와 globalStorage 에 override가 되지 않아 조금 문제가 있습니다.

아래의 요소는 그냥 sessionStorage의 역활에 불과합니다. 페이지가 변경(리프레쉬, 리로딩)되면 날아가버리는 global variable 과 같은 의미입니다.

/**
 * @projectDescription Rhio Ajax Application 2007 - Global Storage extention
 *
 * @author riho.kim@pandora.tv, tizie80@nate.com
 * @messanger (msn)kim2000version@hotmail.com, (nate)tizie80@nate.com
 * @version 0.0.1
 * @usage var TClass = ;
 *
 * @sdoc
 * @namespace
 * @import
 */

/* clien-side globalStorage for cross-browser IE is {}, FF is persistent storage "globalStorage"*/

/* sessionStorage is FF's major Storage Object & globalStorage is FF's persistent storage Object
  * It's two Storage Object is supported only FireFox 2.0 more
  * page is http://cse-mjmcl.cse.bris.ac.uk/blog/2006/10/30/1162236580795.html
  */

window.TStorage = {    
    STORAGE_DEFAULT_LENGTH : 0,
    
    setup : function() {
        this.STORAGE_DEFAULT_LENGTH = this.size();
    },
    
    /* public */
    setItem : function(key, value) {
        this[key] =  value;
    },
    
    /* public */
    getItem : function(key) {
        return this[key];
    },
    
    /* public */
    removeItem : function(key) {
        if(this.isKey(key)) delete this[key];
    },
    
    /* public */
    hasItem : function(key) {
        return typeof this.getItem(key) != 'undefined';
    },
    
    /* public */
    keys : function() {
        var key = [];
        for(property in this) key.push(property);
        return key;
    },
    
    /* public */
    values : function() {
        var value = [];
        for(property in this) value.push(this[property]);
        return value;
    },
    
    /* public */
    size : function() {
        return this.keys().length - this.STORAGE_DEFAULT_LENGTH;
    },
    
    /* public debug method */
    viewStorageTable : function() {
        var keys = this.keys();
        var value = this.values();
        
        var str = [];
        for(var i=0, limit=keys.length; i<limit; i++) {
            str.push('key : <b>'+ keys[i] +'</b>, value : <b>'+ values[i] +'</b><br />');
        }
        var o = document.createElement('div');
            o.style.cssText = this.visibilityStyles;
            o.innerHTML(str.join(''));
        
        document.body.appendChild(o);
    },
    
    visibilityStyles: 'position: absolute; top:0px; left:0px; z-index:9999;'
};
신고
Posted by Rhio.kim
원본출처 : http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage
사용자 삽입 이미지

Safari 계열에서도 클라이언트 사이드 데이터 베이스 스토리지를 지원하는군요. HTML5 표준이 나오면.. 기대 됩니다.

클라이언트 사이트 스토리지 개념을 대부분의 브라우저가 도입하고 있는데 IE에서만 소식을 못 접하고 있네요.

사파리에서도 원본출처로 가시면 관련 기사를 볼 수 있습니다.

몇일 전에 파이어 폭스에 대해서도 기재한 적이 있는데요. 파이어 폭스에서는 현재도 sqlite 라이브러리를 이용해서

globalStorage(지속성을 갖는 스토리지) 와 sessionStorage(일회성을 갖는 스토리지) 로 분류하여 지원하고 있습니다.

현재 클래스화하여 사용할 수 있도록 만들 구 있습니다.  조만간 공개 토록하겠습니다.

뭐 거창한것은 아닙니다. 아래 소스와 같이 쿼리문을 날리고 그런 정도의 지원이 아닙니다.

FF의 글로벌 오브젝트로 지원되는 것이구요. 그래도 Ajax개발에 있어서는  절실히 필요한 부분임은

확실합니다. 하루 속히 IE에서도 지원되고 Opera에서도 지원을 했으면 좋겠네요.


var database = openDatabase("Database Name", "Database Version");

database.executeSql("SELECT * FROM test", function(result1) {
  // do something with the results
  database.executeSql("DROP TABLE test", function(result2) {
    // do some more stuff
    alert("My second database query finished executing!");
  });
});


신고
Posted by Rhio.kim
원본 출처 : http://developer.mozilla.org/en/docs/Storage

파이어 폭스 개발자 사이트에 있는 내용중에 하나 입니다.
우연찮게 모질라 계열 Active X 부분 검색하다가 Storage 기능이 있다는걸 알게 되었는데요.

google gears 에서는 자체 active x를 이용해 Open 라이브러리 sqlite 라는 로컬 DBMS 이용해서
로컬 스토리지를 Active X가 설치 가능한 모든 브라우저에서 사용하고 있습니다.

파이어 폭스에서는 자체적으로 이런 기능을 지원하고 있습니다.

이는 파이어폭스에서만 지원되기 때문에 다른 브라우저에서는 사용할 수 없습니다.

이를 이용하면 어떤 장점들이 있냐하면 Ajax 개발을 통해 서버측 리소스를 모두 클라이언트
스토리지에 저장할 수 있습니다. 리소스는 어떤 개체든 상관없습니다. sqlite에는 바이너리 파일까지 저장이
가능한걸로 알고 있습니다.

이를 이용한다면 경우에 따라서는 서버측으로 쿼리를 던지지 않아도 됩니다.
또한 사이트의 메인 페이지 HTML 소스를 로컬 스토리지에 담아놓게 되면 사이트의 재접속시에
서버측에 Request를 할 필요가 없게 됩니다.

또한 이미지 자체 swf 파일 자체도 Sqlite에 입력해 놓고 불러올 수도 있습니다.

좀더 웹 하드 기능까지 할 수 있습니다. 이는 Ajax 개발에 있어 좀더 강력한 웹 어플리케이션을 만들고
web2.0 시대가 아닌 web3.0 의 차새대 웹 기반을 닦을 수 있는 좋은 부분이라고 생각합니다.

IE에서도 차차 이런 부분을 지원하지 않을까 생각도 해봅니다.
이에 Ajax기술은 좀더 각광 받을꺼라.... 삼천포로 많이 빠졌네요..

아무튼 FF에서만 지원되기는 하지만 로컬 스토리지의 역활을 하는 녀석이 있다는걸 오늘 새롭게 알았습니다.

Storage is a database API in Firefox 2 and above backed by sqlite. It is available to trusted callers only, which means chrome code and extensions, and not web pages. It is currently "unfrozen," which means that the API is subject to change at any time. It is likely that the API will change somewhat between Firefox 2 alpha 2 and Firefox 2 final, and also sometime between Firefox 2 and Firefox 3.

Storage is sometimes confused with the WHATWG DOM storage feature in Firefox 2 which can be used by web pages to store persistent data. The Storage API is for extension authors and Firefox components only.

This document covers the mozStorage API and some peculiarities of sqlite. It does not cover SQL or "regular" sqlite. For this you should use your favorite SQL reference. You might also want to look at the sqlite documentation and especially the query language understood by sqlite. For mozStorage API help, you can post to mozilla.dev.apps.firefox on the news server news.mozilla.org. To report bugs, use Bugzilla (product "Toolkit", component "Storage").

See Storage:Performance for how to get your database connection performing well.

SQLite Database Browser is a capable free tool available for many platforms. It can be handy for examining existing databases and testing SQL statements.

Contents

[hide]

신고
Posted by Rhio.kim