[ JavaScript ] sessionStorage에 여러 아이템 저장하기, 객체를 세션스토리지에 저장하기

여러 아이템을 sessionStorage에 저장하고 싶다면 아래와 같은 방법을 이용할 수 있다.

 

 

키 하나에 모두 저장하기

const data = {
    updateName: name,
    updateURL: url,
    updateKey: key
};

sessionStorage.setItem('userData', JSON.stringify(data));

여러 아이템을 data라는 객체에 저장하고

JSON.stringify() 함수를 사용해 객체를 문자열로 변환시켜 userData 키에 저장할 수 있다.

 

 

 

sessionStorage에는 아래와 같이 담긴다.

 

 

 

 

 

그런 다음 가져올 때는 JSON.parse() 함수를 사용해 문자열을 다시 객체로 변환합니다.

 

const data = JSON.parse(sessionStorage.getItem('userData'));

const updateName = data.updateName;
const updateURL = data.updateURL;
const updateKey = data.updateKey;

 

 

 

 

 

 

각각의 Key에 해당 Value 저장하기 - forEach

 

Object.entries(data).forEach(([key,value]) => {
  sessionStorage.setItem(key,value);
});

 

Object.entries()를 사용해 객체의 프로퍼티를 [key,value] 형태의 배열로 변환한다.

Object.entries()는 ECMAScript 2017(ES8)에 도입된 JS 내장 메서드 중 하나로

객체를 인자로 받아 해당 객체의 속성을  [key,value] 형태의 배열로 반환한다.

 

 

 

콘솔에 Object.entries(data)를 찍어보면 아래와 같이 나온다.

 

 

 

 

그리고 나서 forEach를 사용해서 객체의 프로퍼티를 순회하면서 처리해

아래와 같이 세션스토리지에 담기게 된다.

 

 

 

 

 

 

가져올 때는 일반 세션스토리지를 가져다 쓰는 것처럼 쓰면 된다.

 

const name = sessionStorage.getItem('name');
const url = sessionStorage.getItem('url');
const key = sessionStorage.getItem('key');

 

 

 

 

 

각각의 Key에 해당 Value 저장하기 - Map

 

map()메서드를 활용하면 배열의 각 요소에 대해 주어진 함수를 싱행하고

새로운 배열을 반환한다. 아래와 같이 sessionStorage.setItem에 저런식으로 담을 경우에는 

굳이 쓸 필요는 없을 것 같지만, 원본 배열을 변형하여 쓰고 싶을 때는 map()메서드는

원본 데이터는 유지하면서 새로운 배열을 만들 수 있어 유용하다.

 

Object.entries(data).map(([key, value]) => sessionStorage.setItem(key, value));