자바스크립트 객체를 sessionStorage에 저장합니다.

자바스크립트 객체를 sessionStorage에 저장합니다.

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

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

현재는 개체를 JSON으로 직렬화한 다음 병렬화하여 개체를 복구하면 이러한 제한을 피할 수 있습니다.하지만 스토리지 API는 언제나setItem그리고.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'

나는 시도해봤습니다.defineGetter그리고.defineSetter호출을 가로채는 방법이지만 지루한 작업입니다. 모든 속성을 정의해야 하고 내 목표는 미래의 속성을 아는 것이 아니기 때문입니다.

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

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

개체를 '스트라이징'할 수 없습니까?그럼 쓰시오sessionStorage.setItem()객체의 문자열 표현을 저장하려면...필요할 때는sessionStorage.getItem()그 다음에 사용합니다.$.parseJSON()다시 꺼내려고요?

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

Web Storage API에서 제공하는 액셀러레이터를 사용하거나 래퍼/어댑터를 작성할 수 있습니다.DefineGetter/defineSetter에 대한 언급된 문제를 보면 래퍼/어댑터를 쓰는 것은 당신에게 너무 힘든 일인 것 같습니다.

솔직히 뭐라고 말해야 할지 모르겠어요.어쩌면 당신은 "말도 안 되는 한계"가 무엇인지에 대한 당신의 의견을 재평가할 수 있을 것입니다.Web Storage API는 키/밸류 스토어로서 당연한 것입니다.

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

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']);

페이지 재로드 후 재구성할 수 없는 함수 리터럴(읽기 닫힘)을 포함할 수 있으므로 세션 저장은 임의 개체를 지원할 수 없습니다.

세션 저장소에서 개체를 저장하고 검색하는 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);

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

예제:

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

CustomHook은 반응 17.0.1의 sessionStorage를 사용하여 토큰을 객체로 저장하는 가장 좋은 방법 중 하나입니다.

다음 지침을 따릅니다.

1. session 구현사용자 지정 기능 내에서 스토리지 가져오기/설정:

   export default function useToken() {
      const getToken = () => {
        const tokenString = sessionStorage.getItem('token');
        const userToken = JSON.parse(tokenString);
        return userToken?.token;
      };
   
      const [token, setToken] = useState(getToken());
   
      const saveToken = (userToken) => {
        sessionStorage.setItem('token', JSON.stringify(userToken));
        setToken(userToken.token);
      };
   
   
      return {
        setToken: saveToken,
        token,
      };
    }
   

2. 이 기능은 다음과 같은 다른 구성 요소에서 후크로 가져와 사용할 수 있습니다.

    import useToken from './useToken';
   
    const { token, setToken} = useToken(); // call CustomHook
   
    const handleSubmit = async (event) => {
        event.preventDefault();
        // call functionAPI
        const token = await loginUser({
          username,
          password,
        });
        setToken(token); // AUTOMATICALLY token will be stored to sessionStorage of browser
      };
   

언급URL : https://stackoverflow.com/questions/6193574/save-javascript-objects-in-sessionstorage