sessionStorage에 자바 스크립트 객체 저장

sessionStorage에 자바 스크립트 객체 저장

---

SessionStorage 및 LocalStorage를 사용하면 웹 브라우저에 키 / 값 쌍을 저장할 수 있습니다. 값은 문자열이어야하며 js 객체 저장은 사소한 것이 아닙니다.

var user = {'name':'John'};
sessionStorage.setItem('user', user);
var obj = sessionStorage.user; // obj='[object Object]' Not an object

요즘에는 객체를 JSON으로 직렬화 한 다음 역 직렬화하여 객체를 복구하여 이러한 제한을 피할 수 있습니다. 그러나 스토리지 API는 항상 setItemand getItem메소드를 통과 합니다.

sessionStorage.setItem('user', JSON.stringify(user));
var obj = JSON.parse(sessionStorage.getItem('user')); // An object :D

이 제한을 피할 수 있습니까?

나는 단지 다음과 같은 것을 실행하고 싶다 :

sessionStorage.user.name; // 'John'
sessionStorage.user.name = 'Mary';
sessionStorage.user.name // 'Mary'

모든 속성을 정의해야하며 대상이 미래 속성을 알지 못하기 때문에 호출을 가로 채기 위해 defineGetterand defineSetter메소드를 시도했지만 지루한 작업이었습니다.

---

Web Storage API에서 제공 한 접근자를 사용하거나 랩퍼 / 어댑터를 작성할 수 있습니다. defineGetter / defineSetter에 대해 언급 한 문제에서 래퍼 / 어댑터를 작성하는 것이 너무 효과적입니다.

솔직히 말해 줄 말이 없습니다. 어리석은 한계가 무엇인지에 대한 당신의 의견을 재평가 할 수있을 것입니다. Web Storage API는 키 / 값 저장소로되어 있습니다.

---

객체를 ' sessionStorage.setItem()문자열 화' 할 수 없습니까? 그런 다음 객체의 문자열 표현을 저장하는 데 사용할 수 있습니다. 그러면 필요할 때 다시 가져 오는 데 sessionStorage.getItem()사용할 $.parseJSON()수 있습니까?

작업 예 http://jsfiddle.net/pKXMa/

---

해결책은 sessionStorage에서 setItem을 호출하기 전에 객체를 문자열 화하는 것입니다.

var user = {'name':'John'};
sessionStorage.setItem('user', JSON.stringify(user));
var obj = JSON.parse(sessionStorage.user);

---

이것은 객체를 포함한 모든 값 유형에서 작동하는 동적 솔루션입니다.

class Session extends Map {
  set(id, value) {
    if (typeof value === 'object') value = JSON.stringify(value);
    sessionStorage.setItem(id, value);
  }

  get(id) {
    const value = sessionStorage.getItem(id);
    try {
      return JSON.parse(value);
    } catch (e) {
      return value;
    }
  }
}

그런 다음 :

const session = new Session();

session.set('name', {first: 'Ahmed', last : 'Toumi'});
session.get('name');

---

사용 사례 :

 sesssionStorage.setObj(1,{date:Date.now(),action:'save firstObject'});
 sesssionStorage.setObj(2,{date:Date.now(),action:'save 2nd object'}); 
 //Query first object
  sesssionStorage.getObj(1)
  //Retrieve date created of 2nd object
  new Date(sesssionStorage.getObj(1).date)

API

Storage.prototype.setObj = function(key, obj) {

        return this.setItem(key, JSON.stringify(obj))
    };

    Storage.prototype.getObj = function(key) {
        return JSON.parse(this.getItem(key))
    };

---

세션 저장소는 임의의 개체를 지원할 수 없습니다. 페이지를 다시로드 한 후에는 재구성 할 수없는 함수 리터럴 (읽기 클로저)이 포함될 수 있습니다.

---

    var user = {'name':'John'};
    sessionStorage['user'] = JSON.stringify(user);
    console.log(sessionStorage['user']);

---

크로스 브라우저 기능으로이를 수행 하는 상점 라이브러리 를 사용할 수도 있습니다 .

예 :

// Store current user
store.set('user', { name:'Marcus' })

// Get current user
store.get('user')

// Remove current user
store.remove('user')

// Clear all keys
store.clearAll()

// Loop over all stored values
store.each(function(value, key) {
    console.log(key, '==', value)
})

참고 URL : https://stackoverflow.com/questions/6193574/save-javascript-objects-in-sessionstorage