HTML5 로컬 저장소 대체 솔루션 [닫힘]

localStorage네이티브 지원이없는 브라우저에서 시뮬레이션 할 수있는 자바 스크립트 라이브러리와 코드를 찾고 있습니다 .

기본적으로 localStorage데이터를 저장하는 데 사용 하는 사이트를 코딩하고 기본적으로 지원하지 않는 브라우저에서도 계속 작동한다는 것을 알고 싶습니다. 이것은 라이브러리가 window.localStorage존재 하는지 감지하고 존재 하는 경우 사용 한다는 것을 의미합니다 . 존재하지 않는 경우 window.localStorage네임 스페이스에 자체 구현을 생성하여 일종의 로컬 스토리지 대체 방법을 생성 합니다.

지금까지 다음 솔루션을 찾았습니다.

1. 간단한 sessionStorage 구현.
2. 쿠키를 사용 하는 구현 (이 아이디어에 만족하지 않음).
3. Dojo의 dojox.storage 이지만 실제로는 폴 백이 아니라 자체적 인 것입니다.

Flash 및 Silverlight는 로컬 저장소에도 사용할 수 있지만 표준 HTML5 localStorage의 대체 수단으로 사용하는 방법에 대해서는 아무것도 찾지 못했습니다. Google Gears에도이 기능이 있습니까?

찾은 관련 라이브러리, 리소스 또는 코드 조각을 공유하십시오! 특히 순수한 자바 스크립트 또는 jquery 기반 솔루션에 관심이 있지만 그럴 가능성은 낮습니다.

저는 PersistJS ( github repository )를 사용 합니다.이 저장소 는 클라이언트 측 저장소를 코드에 대해 원활하고 투명하게 처리합니다. 단일 API를 사용하고 다음 백엔드에 대한 지원을받습니다.

• flash : Flash 8 영구 저장소.
• gears : Google Gears 기반 영구 저장소입니다.
• localstorage : HTML5 임시 저장소.
• whatwg_db : HTML5 초안 데이터베이스 저장소.
• globalstorage : HTML5 임시 저장소 (이전 사양).
• 즉 : Internet Explorer 사용자 데이터 동작.
• 쿠키 : 쿠키 기반 영구 저장.

예를 들어 쿠키를 사용하지 않으려는 경우 이러한 기능을 비활성화 할 수 있습니다. 이 라이브러리를 사용하면 IE 5.5+, Firefox 2.0+, Safari 3.1+ 및 Chrome에서 기본 클라이언트 측 스토리지 지원을받을 수 있습니다. 브라우저에 Flash 또는 Gears가있는 경우 플러그인 지원 지원. 쿠키를 활성화하면 모든 곳에서 작동합니다 (그러나 4kB로 제한됨).

순수 JS 기반 단순 localStorage 폴리 필 :

데모 : http://jsfiddle.net/aamir/S4X35/

HTML :

<a href='#' onclick="store.set('foo','bar')">set key: foo, with value: bar</a><br/>
<a href='#' onclick="alert(store.get('foo'))">get key: foo</a><br/>
<a href='#' onclick="store.del('foo')">delete key: foo</a>​

JS :

window.store = {
    localStoreSupport: function() {
        try {
            return 'localStorage' in window && window['localStorage'] !== null;
        } catch (e) {
            return false;
        }
    },
    set: function(name,value,days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime()+(days*24*60*60*1000));
            var expires = "; expires="+date.toGMTString();
        }
        else {
            var expires = "";
        }
        if( this.localStoreSupport() ) {
            localStorage.setItem(name, value);
        }
        else {
            document.cookie = name+"="+value+expires+"; path=/";
        }
    },
    get: function(name) {
        if( this.localStoreSupport() ) {
            var ret = localStorage.getItem(name);
            //console.log(typeof ret);
            switch (ret) {
              case 'true': 
                  return true;
              case 'false':
                  return false;
              default:
                  return ret;
            }
        }
        else {
            // cookie fallback
            /*
             * after adding a cookie like
             * >> document.cookie = "bar=test; expires=Thu, 14 Jun 2018 13:05:38 GMT; path=/"
             * the value of document.cookie may look like
             * >> "foo=value; bar=test"
             */
            var nameEQ = name + "=";  // what we are looking for
            var ca = document.cookie.split(';');  // split into separate cookies
            for(var i=0;i < ca.length;i++) {
                var c = ca[i];  // the current cookie
                while (c.charAt(0)==' ') c = c.substring(1,c.length);  // remove leading spaces
                if (c.indexOf(nameEQ) == 0) {  // if it is the searched cookie
                    var ret = c.substring(nameEQ.length,c.length);
                    // making "true" and "false" a boolean again.
                    switch (ret) {
                      case 'true':
                          return true;
                      case 'false':
                          return false;
                      default:
                          return ret;
                    }
                }
            }
            return null; // no cookie found
        }
    },
    del: function(name) {
        if( this.localStoreSupport() ) {
            localStorage.removeItem(name);
        }
        else {
            this.set(name,"",-1);
        }
    }
}​

Modernizr 위키에서 polyfill 페이지를 보셨습니까?

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

해당 페이지에서 webstorage 섹션을 찾으면 10 개의 잠재적 솔루션 (2011 년 7 월 현재)을 볼 수 있습니다.

행운을 빕니다! 표

아래는 모든 코드를 로컬 범위 내에 캡슐화 한 Aamir Afridi의 응답을 정리 한 버전입니다.

전역 ret변수 를 만드는 참조를 제거하고 저장된 "true"및 "false"문자열을 BrowserStorage.get()메서드 내에서 부울 값으로 구문 분석하는 것을 제거 했습니다. 실제로 "true"또는 "true"문자열을 저장하려고하면 문제가 발생할 수 있습니다. "그릇된".

로컬 저장소 API는 문자열 값만 지원하므로 해당 데이터를 JSON 문자열로 인코딩하여 적절한 데이터 유형과 함께 JavaScript 변수 데이터를 저장 / 검색 할 수 있으며, 그런 다음 https 와 같은 JSON 인코딩 / 디코딩 라이브러리를 사용하여 디코딩 할 수 있습니다 . //github.com/douglascrockford/JSON-js

var BrowserStorage = (function() {
    /**
     * Whether the current browser supports local storage as a way of storing data
     * @var {Boolean}
     */
    var _hasLocalStorageSupport = (function() {
        try {
            return 'localStorage' in window && window['localStorage'] !== null;
        } catch (e) {
            return false;
        }
    })();

    /**
     * @param {String} name The name of the property to read from this document's cookies
     * @return {?String} The specified cookie property's value (or null if it has not been set)
     */
    var _readCookie = function(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }

        return null;
    };

    /**
     * @param {String} name The name of the property to set by writing to a cookie
     * @param {String} value The value to use when setting the specified property
     * @param {int} [days] The number of days until the storage of this item expires
     */
    var _writeCookie = function(name, value, days) {
        var expiration = (function() {
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days*24*60*60*1000));
                return "; expires=" + date.toGMTString();
            }
            else {
                return "";
            }
        })();

        document.cookie = name + "=" + value + expiration + "; path=/";
    };

    return {
        /**
         * @param {String} name The name of the property to set
         * @param {String} value The value to use when setting the specified property
         * @param {int} [days] The number of days until the storage of this item expires (if storage of the provided item must fallback to using cookies)
         */
        set: function(name, value, days) {
            _hasLocalStorageSupport
                ? localStorage.setItem(name, value)
                : _writeCookie(name, value, days);
        },

        /**
         * @param {String} name The name of the value to retrieve
         * @return {?String} The value of the 
         */
        get: function(name) {
            return _hasLocalStorageSupport
                ? localStorage.getItem(name) 
                : _readCookie(name);
        },

        /**
         * @param {String} name The name of the value to delete/remove from storage
         */
        remove: function(name) {
            _hasLocalStorageSupport
                ? localStorage.removeItem(name)
                : this.set(name, "", -1);
        }
    };
})();

개인적으로 amplify.js를 선호 합니다 . 과거에는 정말 잘 작동했으며 모든 로컬 스토리지 요구 사항에 권장했습니다.

IE 5+, Firefox 2+, Safari 4+, Chrome, Opera 10.5+, iPhone 2+, Android 2+를 지원하고 브라우저 간 스토리지를 처리하기위한 일관된 API를 제공합니다.

store.js는 다른 브라우저에서 userData, IE 및 localStorage를 사용합니다.

• 너무 복잡한 일을하려고하지 않습니다

• 쿠키, 플래시, jQuery가 필요하지 않습니다.

• 깨끗한 API.

• 5kb 압축

https://github.com/marcuswestin/store.js

DOM 저장소 의 MDN 페이지는 쿠키를 사용하는 몇 가지 해결 방법을 제공합니다.

Lawnchair 도 좋은 대안 인 것 같습니다.

잔디 의자는 작고 외부를 제외하고는 일종의 소파와 같습니다. 가볍고 적응력이 뛰어나며 간단하고 우아한 지속성 솔루션이 필요한 html5 모바일 앱에 적합합니다.

• 컬렉션. 잔디 의자 인스턴스는 실제로 객체의 배열입니다.
• 적응 형 지속성. 기본 저장소는 일관된 인터페이스 뒤에 추상화됩니다.
• 플러그 형 컬렉션 동작. 때로는 수집 도우미가 필요하지만 항상 그런 것은 아닙니다.

Gears를 대체 수단으로 사용하는 realstorage 가 있습니다 .