웹에서는 정보를 저장할 수 있는 방법이 세가지 정도가 있다. Cookie, LocalStorage, SessionStorage가 있다. Cookie는 웹 페이지를 받아오는 서버와 항상 통신하며, 그 정보의 크기가 파일당 4KB로 제한되어있다.
또한, 그 기간이 정해져있어 쿠키가 만료되면 해당 정보를 조회 할 수 없게 된다.(이 부분은 쿠키의 만료기간을 길게 설정하여 해결할 수 있다.)
쿠키에 대해서는 다음에 더 자세히 알아보고 나머지 두 storage인 웹 스토리지(Web Storage)에 대해 알아본다.
웹 스토리지란 브라우저에 정보를 저장하는 공간으로 도메인마다 그 공간이 설정되어있다. LocalStorage와 SessionStorage 두 가지로 이루어져 있으며, 두 가지 스토리지(Storage)는 데이터의 휘발성에서 차이가 있다.
두 가지 스토리지는 몇가지 공통점이 있다.
1. 도메인 단위로 스토리지를 갖게 된다. Root Domain에 따라 Storage를 갖게 되며, 도메인이 바뀌면 그 스토리지에 정보도 바뀐다.
2. window의 하위 객체로서, Storage를 상속 받는다.
3. 쿠키에 비해 큰 용량을 가지고 있다. (모바일 기준 2.5 MB, 데스크탑은 5 ~ 10MB)
윈도우의 하위 객체로 같은 클래스를 상속받기 때문에, 같은 메서드(Method)를 사용한다. 사용법 또한 비슷하고, 데이터를 기록 하는 방식도 같다.
그렇다면, 데이터는 어떻게 기록 될까?
window의 하위 객체로 존재한다.
localStorage
또는 window.localStorage
로 가져와 사용 할 수 있다.
데이터를 쓰기 위해서는 setItem
이라는 메서드가 필요하다.
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
메서드를 사용 할 수 있다.
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
를 통해 할당했던 배열과 객체는 다시 역변환해 사용할 수 있게 된다.
localStorage
와 같이 같은 방법을 통해 데이터를 쓰고 가져올 수 있다.
getItem, setItem, clear,...
다양한 메서드들을 localStorage
와 같은 방식으로 사용하게 된다.
두 스토리지는 데이터의 보존기간에서 큰 차이점을 지닌다.
localStorage는 도메인에 다시 접속한다면 지우지 않는한 데이터가 영구적으로 남아있는다.
sessionStorage는 브라우저가 종료되면 그 데이터가 모두 지워진다.
때문에 같은 도메인 안에서 사용자가 지속적으로 사용할 데이터가 남아 있지만,
사용자가 내일 다시 오게 된다면 localStorage는 남아있고 sessionStorage는 다시 데이터를 쌓아야 하게 된다.
두 스토리지는 브라우저 상에 데이터를 저장하는 방식으로 보안에 굉장히 취약하다.
때문에, 사용자의 중요 정보는 저장하지 않는것이 좋다.
하지만, 커머스 사이트에서 보았던 물건 품목이라던지 가볍게 기록할만한 내용이 있다면 그러한 용도에 맞게 사용할 가치가 있는 저장소라고 생각된다.