2017-09-21 18 views
1

내 custom 메서드 내에서 네이티브 sessionStorage 범위에 액세스하는 방법을 궁금합니다.sessionStorage 프록시 클래스 범위

내 예 :

https://jsfiddle.net/3mc7ao7j/1/

라인 3에서 나는 데이터에 대한 내 기본 sessionStorage 후 수행 내 돌연변이를 통해 프록시 할 수 있도록하고 싶습니다.

어떻게 다시 해당 범위에 액세스합니까? 난 그냥 호출 할 수 있습니다 알고

sessionStorage.setItem()

를하지만 전 세계적으로 가능하며 그렇게 잘못 느끼기 때문에 그것은 간단하게 작동합니다. 주로 전 세계적으로 사용할 수없는 객체없이이 작업을 수행하는 방법을 알고 싶어하므로 다른 객체를 프록시하는 방법을 배울 수 있습니다.

답변

3

location과 같은 일부 객체는 읽기 전용이므로이를 통해 추상화를 만들거나 테스트 가능성을 위해 DI를 사용하는 것이 유용 할 수 있습니다.

sessionStorage을 그대로 사용하는 것으로한다. 일반적으로 추상화가 필요하지 않습니다. 해당 기능을 확장하거나 수정해야하는 경우 사용자 지정 클래스를 만들 수 있습니다. 그것은 Storage 인터페이스를 구현하거나 자체 인터페이스를 가질 수 있습니다.

여기서 Proxy의 사용은 부당합니다. 느리고 코드가 ES5 환경에서 사용되는 것을 제한합니다.

사용자 지정 클래스 또는 개체는 원래 sessionStorage 메서드를 래핑 할 수 있습니다. 스토리지 API가 작기 때문에,의 래퍼 클래스 결과 ~ 코드의 20 개 라인 :

class CustomSessionStorage { 
    get length() { 
    return sessionStorage.length; 
    } 

    getItem(key) { 
    return sessionStorage.getItem(key); 
    } 
    ... 
} 

sessionStorage 목적은 이국적인이다. Storage에서 상속 받았지만 Storage은 생성자가 아니며 sessionStorage 메서드는 sessionStorage에 직접 바인딩해야하므로 CustomSessionStorage.prototype = sessionStorage과 함께 사용할 수 없습니다. 또한 sessionStorage에는 바인딩되어야하는 length 속성 설명자가 있습니다. 나는 기본 객체에 대한 사용자 정의 메소드를 구현하고 싶지만 할 경우

function BaseSessionStorage() {} 

for (let prop of Object.getOwnPropertyNames(Storage.prototype)) { 
    if (typeof sessionStorage[prop] === 'function') { 
    // bind all sessionStorage methods 
    BaseSessionStorage.prototype[prop] = sessionStorage[prop].bind(sessionStorage); 
    } else { 
    // a proxy for other props, length is read-only getter 
    Object.defineProperty(BaseSessionStorage.prototype, prop, { 
     get:() => sessionStorage[prop], 
     set: val => { sessionStorage[prop] = val } 
    }); 
    } 
} 

class CustomSessionStorage extends BaseSessionStorage { 
    getItem(key) { 
    return super.getItem(key); 
    } 
    // the rest of API is inherited 
} 
+0

내가 프록시가 필요합니다

를 확장하는 좀 더 일반적인 방법은 원래의 방법을 감싸고 더 확장 할 수있는 기본 클래스를 제공하는 것입니다 모든 것을 구현하고 싶지는 않습니다. 다른 방법은 없습니다. 'JSON.parse'를 설정할 때마다'JSON.stringify' 데이터를 원한다면 매번이 작업을 수행하지 않을 시간의 90 %를 얻게됩니다. 나는 단순히 나의 proxylayer가 이것을 돌보고 싶다. –

+0

Proxy에 대한 실제 필요성은 여기에 없습니다. 이것은 일반 클래스 (또는 저장소가 싱글 톤 (singleton)이라고 가정하기 때문에 객체)에 의해 처리 될 수 있습니다. 원래의 질문에 대해서는 * 어떻게 다시 그 범위에 액세스 할 수 있습니까? *, 당신은'setItem' 안에 명시 적으로'sessionStorage.setItem()'으로 참조 할 필요가 있습니다. 프록시 메소드에서'this'를 사용할 수 있지만, 메소드가 다르게 호출되는 경우에만 호출 할 수 있습니다 :'set (k, v) {this.setItem (a, msg)}'. – estus

+0

원래의 'sessionStorage' 객체처럼 동작하도록 원한다면 모든 메소드를 구현해야합니다. –