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)
})

세션 저장 영역에서 오브젝트를 저장하고 검색하기 위해 2 개의 랩퍼 메소드를 작성할 수 있습니다.

function saveSession(obj) {
  sessionStorage.setItem("myObj", JSON.stringify(obj));
  return true;
}

function getSession() {
  var obj = {};
  if (typeof sessionStorage.myObj !== "undefined") {
    obj = JSON.parse(sessionStorage.myObj);
  }
  return obj;
}

다음과 같이 사용하십시오.-오브젝트를 가져오고 일부 데이터를 수정 한 후 다시 저장하십시오.

var obj = getSession();

obj.newProperty = "Prod"

saveSession(obj);