[프로그래밍] SessionStorage

여러 블로그를 보면 LocalStorage와 SessionStorage를 함께 비교하며 이해하기 쉽게 작성된 글이 많다.
처음에는 나도 다른 블로그와 다르지 않게 LocalStorage와 SessionStorage를 비교하면서 덤으로 Cookies까지 곁들이려고 했으나..... 문해력이 턱없이 부족해서.... 쉽지가 않았다....

 

 

LocalStorage, SessionStorage, cookies 각각 따로 정리하고 3개 모두 비교하는 정리글을 추가로 작성할 것 이다. 다소 중복되는 내용이 많겠지만 글쓰기 능력이 딸리니깐.... 뭐 어쩔수 없다는

 

예전부터 LocalStorage와 SessionStorage를 자주 사용했지만 단순 저장소로 생각하고 서로 구분없이 그때그때 마음에 끌리는 저장소를 선택해서 사용했다.

이번 정리글을 작성하면서 서로의 특징과 차이점을 명확하게 알 수 있는 계기가 되었다. 또 이렇게 난 성장한다.

 

SessionStorage

SessionStorage는 LocalStorage와 동일한 기능을 가진 브라우저 저장소다.

LocalStorage편에서도 말했듯 데이터를 저장하기 위해 일반적으로 DB를 사용한다.

하지만 장바구니, 사용자 정보(닉네임 같은 해킹 위험에 상대적으로 적은 정보)같은 데이터를 DB에 저장한다는건 다소 비용 낭비일 수 있다.

 

데이터 저장의 목적이 아닌 휘발성 데이터를 저장하기 위한 목적으로 SessionStorage 또는 LocalStorage를 사용하면 좋을 것 같다.

SessionStorage와 LocalStorage는 저장소라는 동일한 기능을 가지고 있지만 큰 차이점을 가지고 있다.

아래 SessionStorage의 특징을 확인 후, LocalStorage 특징도 함께 비교하면 둘중 어떤걸 사용해야할지 고민 없이 개발 상황에 맞게 선택해서 사용할 수 있을 것 이다.

 

 

[공학] LocalStorage

 

저장

저장 문법

sessionStorage.setItem(key, value)

key, value 형태로 저장 되며, Local Storage와 동일하다.

주의할점은 value는 문자열로 저장 가능하다.

문자열이 아닌 다른 타입으로 저장 시 정상적으로 저장 되지 않는다.

문자열 외 다른 타입을 저장하기 위해 일반적으로 JSON메소드를 사용하여 저장한다.

 

<template>
  <div>
    <button @click="saveSession">세션스토리지 저장</button>
  </div>
</template>

<script>
export default {
  methods: {
    saveSession() {
      sessionStorage.setItem("super", "pil");
    },
  },
};
</script>

SessionStorage저장

👉 sessionStorage.setItem("super", "pil")

1. "세션스토리지 저장" 버튼을 클릭하면 saveSession()가 실행되고 sessioStorage에 key값은 super, value는 pil로 값이 저장 된다.

 

객체, 배열 또는 그 외 다른 타입 저장

<template>
  <div>
    <button @click="saveSession">세션스토리지 저장</button>
  </div>
</template>

<script>
export default {
  methods: {
    saveSession() {
      const payload = { super: "pil" };
      sessionStorage.setItem("super", payload);
    },
  },
};
</script>

객체 타입 바로 저장

문자열로 저장하지 않은 경우

대부분 저장소에 단순 문자열만 넣지 않을 것 이다.

배열, 객체 또는 그 외 타입을 넣게 될껀데 위 예제와 같이 객체를 바로 저장 하게 되면 [object Object]로 저장된다. (Local Storage로 동일)

Storage에는 반드시 문자열만 저장 가능하며 다른 타입을 저장하기 위해서는 문자열로 변환 후 저장 가능하다.

 

<template>
  <div>
    <button @click="saveSession">로컬스토리지 저장</button>
  </div>
</template>

<script>
export default {
  methods: {
    saveSession() {
      const payload = { super: "pil" };
      sessionStorage.setItem("super", JSON.stringify(payload));
    },
  },
};
</script>

sessionStorage에 객체 타입 저장하기

👉 sessionStorage.setItem("super", JSON.stringify(payload))

1. 자바스크립트에서 객체, 배열 또는 그 외 다른 타입을 쉽게 문자열로 만들어주는 JSON.stringify()가 있다.
2. stringify()로 객체를 문자열로 만들어 저장하고 값을 가져올때는 JSON.parse()로 원래의 타입으로 복구 하면 된다.

 

가져오기

가져오기 문법

sessionStorage.getItem(key)

session storage에서 값을 가져오기 위해서는 저장한 key값으로 조회 하면 된다.

 

<template>
  <div>
    <button @click="getSession">세션스토리지 가져오기</button>
  </div>
</template>

<script>
export default {
  methods: {
    getSession() {
      const data = sessionStorage.getItem("super");
      console.log("data", data); // pil
    },
  },
};
</script>

👉 const data = sessionStorage.getItem("super")

1. 저장한 key값으로 저장된 value값을 가져올 수 있다.
2. 단순 문자열을 저장한 경우 위 예제와 같이 한번에 가져올 수 있지만 문자열이 아닌 그 외 타입을 저장 한경우 문자열에서 원본타입으로 변환시키는 과정이 필요하다.

 

객체, 배열 또는 그 외 다른 타입 가져오기

<template>
  <div>
    <button @click="saveSession">세션스토리지 저장</button>
    <button @click="getSession">세션스토리지 가져오기</button>
  </div>
</template>

<script>
export default {
  methods: {
    saveSession() {
      const payload = { super: "pil" };
      sessionStorage.setItem("super", JSON.stringify(payload));
    },
    getSession() {
      const data = JSON.parse(sessionStorage.getItem("super"));
      console.log("data", data); // {super: "pil"}
    },
  },
};
</script>

👉 JSON.parse(sessionStorage.getItem("super"))

1. JSON.parse()를 사용해 문자열을 원래 타입으로 변환하는 과정을 거친다.
2. 정리하면, 문자열이 아닌 그외 타입을 저장하기 위해서는 JSON.stringify()로 데이터를 문자열로 변환하고 가져올때는 JSON.parse()로 원래 타입으로 변환 하면 된다.

 

삭제

삭제 문법

sessionStorage.removeItem(key)
sessionStorage.clear()

removeItem()으로 특정 key값을 삭제 할 수 있고 clear()로 현재 session storage의 데이터를 모두 삭제 할 수 있다.

 

특정 데이터 삭제

<template>
  <div>
    <button @click="remove">세션스토리지 삭제</button>
  </div>
</template>

<script>
export default {
  methods: {
    remove() {
      sessionStorage.removeItem("super");
    },
  },
};
</script>

👉 sessionStorage.removeItem("super")

1. sessionStorage에 key값이 super인 데이터를 삭제 한다.

 

모든 데이터 삭제

<template>
  <div>
    <button @click="remove">세션스토리지 삭제</button>
  </div>
</template>

<script>
export default {
  methods: {
    remove() {
      sessionStorage.clear();
    },
  },
};
</script>

👉 sessionStorage.clear()

1. sessionStorage에 저장된 모든 값을 일괄 삭제 한다.

 

대표 특징

👉 데이터가 세션 단위로 저장 (조건적 휘발성)

sessionStorage에 저장된 데이터는 브라우저가 닫히는 순간 삭제된다.

데이터가 남는 LocalStorage와 비교되는 차이점 이다.

데이터 저장 시 데이터 만료기간을 설정할 수 없으며 브라우저가 닫히기 전 데이터 삭제를 원한다면 자바스크립트 또는 브라우저에서 직접 삭제를 해야된다.

 

👉 브라우저 세션 간에 공유가 불가능

브라우저 공유 불가능

SessionStorage브라우저 끼리 공유 불가능

LocalStorage와 반대로 SessionStorage는 브라우저(세션)끼리 데이터 공유가 불가능 하다.

 

👉 서버로 전송되지 않습니다.

Storage(LocalStorage, SessionStorage)의 공통점 이다.

Cookie와 다르게 Storage(LocalStorage, SessionStorage)는 네트워크 요청 시 서버로 전송되지 않는다. 네트워크 트래픽 비용을 줄여주기 때문에 단순 저장소로 사용하기 좋은 장점을 가진다.

 

잘못된 내용이나 보충이 필요한 내용이 있다면 댓글 남겨 주세요!

주니어 개발자에게 큰 도움이 됩니다! 감사합니다! 😃

 

관련 글

1. https://pygmalion0220.tistory.com/entry/%EA%B3%B5%ED%95%99-LocalStorage - LocalStorage

 

Reference

1. Window.localStorage - Web API | MDN - LocalStorage MDN
2. localStorage와 sessionStorage - LocalStorage와 SessionStorage