WebStorage

uoM·2021년 2월 7일
1

Web Storage

웹에서는 정보를 저장할 수 있는 방법이 세가지 정도가 있다. Cookie, LocalStorage, SessionStorage가 있다. Cookie는 웹 페이지를 받아오는 서버와 항상 통신하며, 그 정보의 크기가 파일당 4KB로 제한되어있다.
또한, 그 기간이 정해져있어 쿠키가 만료되면 해당 정보를 조회 할 수 없게 된다.(이 부분은 쿠키의 만료기간을 길게 설정하여 해결할 수 있다.)
쿠키에 대해서는 다음에 더 자세히 알아보고 나머지 두 storage인 웹 스토리지(Web Storage)에 대해 알아본다.

웹 스토리지란 브라우저에 정보를 저장하는 공간으로 도메인마다 그 공간이 설정되어있다. LocalStorageSessionStorage 두 가지로 이루어져 있으며, 두 가지 스토리지(Storage)는 데이터의 휘발성에서 차이가 있다.

공통점

두 가지 스토리지는 몇가지 공통점이 있다.
1. 도메인 단위로 스토리지를 갖게 된다. Root Domain에 따라 Storage를 갖게 되며, 도메인이 바뀌면 그 스토리지에 정보도 바뀐다.
2. window의 하위 객체로서, Storage를 상속 받는다.
3. 쿠키에 비해 큰 용량을 가지고 있다. (모바일 기준 2.5 MB, 데스크탑은 5 ~ 10MB)

윈도우의 하위 객체로 같은 클래스를 상속받기 때문에, 같은 메서드(Method)를 사용한다. 사용법 또한 비슷하고, 데이터를 기록 하는 방식도 같다.
그렇다면, 데이터는 어떻게 기록 될까?

LocalStorage

window의 하위 객체로 존재한다.
localStorage또는 window.localStorage로 가져와 사용 할 수 있다.
데이터를 쓰기 위해서는 setItem이라는 메서드가 필요하다.

setItme Method

localStorage.setItem('data', 1);
localStorage.data  // '1'

이처럼 추가하고자 하는 데이터를 key, value 쌍으로 넣게 된다. 설정 된 키에 해당 값이 String type으로 기록된다.
이러한 이유로 해당 키에 배열, 객체 데이터를 추가하기 위해서는 JSON.Stringify를 사용해 해당 데이터를 JSON string으로 변환해 기록해야 한다.

const nums = [1,2,3,4]
const object = {
  name:"reone",
  age:12,
  show:'me',
  the:'money'
}

// 배열
localStorage.setItem('nums', JSON.stringify(nums));
localStorage.setItem('misNums',nums)
localStorage.misNums // "1,2,3,4"
localStorage.nums // "[1,2,3,4]"

// 객체
localStorage.setItem('obj',JSON.stringify(object))
localStorage.setItem('misobj',object)
localStorage.misobj // "[object Object]"
localStorage.obj //"{"name":"reone","age":12,"show":"me","the":"money"}"

배열의 경우는 데이터 자체를 value로 넘기게 되면 문자열 형태로 입력된다.
객체의 경우는 그 데이터 자체를 알아볼수 없게 된다.

객체의 값을 확인하기 위해 키값을 입력해서 밸류 출력을 얻을 수 있는 것과 같이, 밸류를 할당할 때 꼭 setItem을 사용하지 않아도 할당 할 수 있다.

localStorage.myName = "uoM"
localStorage.myName  // "uoM"

getItem Method

해당 키의 값을 읽기 위해서는 getItem 메서드를 사용 할 수 있다.

localStorage.getItem('misobj') // "[object Object]"
localStorage.getItem('obj') //"{"name":"reone","age":12,"show":"me","the":"money"}"

setItem과 마찬가지로 메서드 체이닝을 가지고만 값을 읽는 것도 가능하다.

데이터 사용하기

위의 예제를 통해 배열과 오브젝트를 가져올 수 있게 되었다.
그렇다면 key를 통해 가져온 value 그 자체를 데이터로 사용할 수 있을까?

key마다 string, number, boolean등의 원시 타입은 괜찮지만 (심볼은 사용할 수 없다),
배열이나 객체는 상황이 다르다 JSON.stringify를 통해 변형되었기 때문에 다시 역변환을 해주어야 한다.

const = {
  misNums, // "1,2,3,4"
  nums, // "[1,2,3,4]"
  misobj, // "[object Object]"
  obj,	//"{"name":"reone","age":12,"show":"me","the":"money"}"
} = localStorage

const parseMisNums = JSON.parse(misNums) // Err
const parseNums = JSON.parse(nums) // [1,2,3,4]
const parseMisObj = JSON.parse(misObj) // Err
const parseObj = JSON.parse(obj) // {name: "reone", age: 12, show: "me", the: "money"}

잘못 입력되었던 두가지 데이터를 parsing하는 경우 그 형태가 역변환이 불가능한 상태이기 때문에, 에러가 생긴다.
정상적으로 JSON.stringify를 통해 할당했던 배열과 객체는 다시 역변환해 사용할 수 있게 된다.

Session Storage

localStorage와 같이 같은 방법을 통해 데이터를 쓰고 가져올 수 있다.
getItem, setItem, clear,... 다양한 메서드들을 localStorage와 같은 방식으로 사용하게 된다.

차이점

두 스토리지는 데이터의 보존기간에서 큰 차이점을 지닌다.

  • local: 영구적
  • session: 비영구적

localStorage는 도메인에 다시 접속한다면 지우지 않는한 데이터가 영구적으로 남아있는다.
sessionStorage는 브라우저가 종료되면 그 데이터가 모두 지워진다.

때문에 같은 도메인 안에서 사용자가 지속적으로 사용할 데이터가 남아 있지만,
사용자가 내일 다시 오게 된다면 localStorage는 남아있고 sessionStorage는 다시 데이터를 쌓아야 하게 된다.

결론

두 스토리지는 브라우저 상에 데이터를 저장하는 방식으로 보안에 굉장히 취약하다.
때문에, 사용자의 중요 정보는 저장하지 않는것이 좋다.

하지만, 커머스 사이트에서 보았던 물건 품목이라던지 가볍게 기록할만한 내용이 있다면 그러한 용도에 맞게 사용할 가치가 있는 저장소라고 생각된다.

0개의 댓글