[WebAPI] window.localStorage 부시기!

불타는 코딩🔥 2019. 9. 29. 17:04

2019. 9. 29. 17:04

특징

동기? 비동기? 그리고 저장 만료일

1. localStorage에서 모든 작업은 동기로 이루어집니다. 즉, 원하는 것을 바로 실행(생성, 수정, 읽기, 삭제)이 된다는 것이죠.

대기시간이 없기때문에 비동기에 비해 쉽고, 편리합니다.

2. session, cookie는 저장만료일(expire)이 있습니만, localStorage는 저장만료일이 없습니다.

브라우저 캐쉬, 저장공간 비우기 등등을 활용하여 사용자가 직접 삭제하거나, 개발자가 약간의 세팅을 해주어야 합니다.

저장공간

Mobile 환경에서의 저장공간

	Chrome	Android Browser	Firefox	Safari	Safari	iOS WebView	iOS WebView
	40	4.3	34	6, 7	8	6, 7	8
LocalStorage	10MB	2MB	10MB	5MB	5MB	5MB	5MB

Desktop 환경에서의 저장 공간

	Chrome	Firefox	Safari	Safari	IE	IE
	40	34	6, 7	8	9	10, 11
LocalStorage	10MB	10MB	5MB	5MB	10MB	10MB

하나의 도메인당 5~10MB 정도로 작고 귀여운 용량이지만, 순수한 텍스트로 5MB를 채운다는 건 상상도 못할 일입니다.

아래 링크는 순수한 텍스트로 이루어진 약 5.6MB크기의 텍스트입니다.(새창열기로 다운로드되지않고 보입니다.)

https://ars.els-cdn.com/content/image/1-s2.0-S0092640X00908349-mmc02.txt

주의점

localStorage에 사용자의 개인신상정보를 저장할 경우 해커에 의해 유출될 수 있습니다.

반드시 보안이 좋고, 안전한 저장공간에 저장하시길 바랍니다.

사용법

#준비물

locaStorage.html, localStorage.js

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
</body>
<script src="./localStorage.js"></script>
</html>

지금부터 localStorage.js 파일을 작성할 것이니 잘 보고 순서대로 따라하시면 금방 습득할 수 있을 것 입니다.

1. 저장하기

window.localStorage.setItem("key", "value")

window.localStorage.setItem("myData", "string")

//확인하기
window.localStorage.myData
>>> "stirng"

2. 가져오기

window.localStorage.getItem("key")

const getItem = window.localStorage.getItem("myData")

//확인하기
console.log(getItem)
>>> "string"

3. 삭제하기

window.localStorage.removeItem("key")

window.localStorage.removeItem("myData")

>>> undefined

4. 중요! 에러가 될 수 있는 경우

값이 없는데 undefined 출력되는 경우, chain

window.localStorage.myData

>>> undefined
/*
[3. 삭제하기]에서 myData를 삭제했기때문에  undefined 반환됩니다.
체인으로 접근했을 땐 undefined 뜹니다.
*/

값이 없는데 null 출력되는 경우, getItem(key)

window.localStorage.getItem("myData")

>>> null
/*
[3. 삭제하기]에서 myData를 삭제했기때문에  null 반환됩니다.
getItem 함수로 접근했을 땐 null이 반환됩니다.
*/

이렇게 값이 undefined 혹은 null 일 경우, 값을 활용하여 가공을 하는 과정에서 에러가 날 수 있습니다.

const myData = window.localStorage.getItem("myData")
myData.filter(v => parseInt(v.score[0]) >= 8)

>>> Uncaught TypeError: Cannot read property 'filter' of null
/*
현재 localStorage에 key들 중 이름이 myData인 것이 없습니다.
그러므로, 변수 myData의 경우 null이 할당됩니다.
배열이 아닌 구조에 filter 메서드를 사용할 경우 오류가 납니다.
*/

localStorage에 원하는 값이 없을 경우를 대비하여 대체할 값이나 혹은 초기값을 반드시 세팅해주어야합니다.

5-1. 응용하기

const defaultMovies = [
  {title: "힘을 내요. 미스터리", score: "8.47"},
  {title: "예스터데이", score: "8.45"},
  {title: "장사리", score: "8.54"},
]

const getMyMovies = window.localStorage.getItem("myMovies")
// window.localStorage에 저장된 값이 없기때문에 getMyMovie에 반환되는 값은 null입니다.

const movies = getMyMovies ? JSON.parse(getMyMovies) : defaultMovies
// 변수 movies는 getMyMovie의 키가 없기 때문에 defaultMovies이 참조됩니다.

const filteredMovies = movies.filter(v => parseInt(v.score[0]) >= 8)
// score가 8.0 이상인 영화를 필터링합니다.

console.log(filteredMovies)
>>> [
  {title: "힘을 내요. 미스터리", score: "8.47"},
  {title: "예스터데이", score: "8.45"},
  {title: "장사리", score: "8.54"},
]

getMyMovies 에는 null 이 들어있습니다. 그러므로 movies 는 defaultMovies를 바라보게 됩니다. defaultMovies의 값을 가지는 movie에 filter메서드를 사용하여 score가 8.0 이상인 영화만 걸러냅니다. defaultMovies의 모든 영화들은 8.0 이상이니 값이 그대로 나옵니다.

5-2. 응용하기

// 추가된 코드
const myMovies = [
  {title: "나쁜녀석들", score: "8.37"},
  {title: "타짜", score: "7.05"},
  {title: "양자물리학", score: "8.91"},
]

const defaultMovies = [
  {title: "힘을 내요. 미스터리", score: "8.47"},
  {title: "예스터데이", score: "8.45"},
  {title: "장사리", score: "8.54"},
]

// 추가된 코드
if(myMovies.length > 0){
  window.localStorage.setItem('myMovies', JSON.stringify(myMovies))
}

// myMovies의 사이즈가 0 보다 크다면 데이터가 있는 것으로 판단하고, localStorage 에 저장하게 됩니다.

const getMyMovies = window.localStorage.getItem("myMovies")
const movies = getMyMovies ? JSON.parse(getMyMovies) : defaultMovies
const filteredMovies = movies.filter(v => parseInt(v.score[0]) >= 8)

console.log(filteredMovies)
>>> [
  {title: "나쁜녀석들", score: "8.37"},
  {title: "양자물리학", score: "8.91"},
]

6. 최종코드

const myMovies = [
      {title: "나쁜녀석들", score: "8.37"},
      {title: "타짜", score: "7.05"},
      {title: "양자물리학", score: "8.91"},
    ]

const defaultMovies = [
      {title: "힘을 내요. 미스터리", score: "8.47"},
      {title: "예스터데이", score: "8.45"},
      {title: "장사리", score: "8.54"},
    ]

if(myMovies.length > 0){
	window.localStorage.setItem('myMovies', JSON.stringify(myMovies))
}

const getMyMovies = window.localStorage.getItem("myMovies")
const movies = getMyMovies ? JSON.parse(getMyMovies) : defaultMovies
const filteredMovies = movies.filter(v => parseInt(v.score[0]) >= 8)

console.log(filteredMovies)
>>> [
    {title: "나쁜녀석들", score: "8.37"},
    {title: "양자물리학", score: "8.91"},
  ]

참조

https://www.html5rocks.com/en/tutorials/offline/quota-research/

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

저작자표시

'Javascript' 카테고리의 다른 글

transform byte to binary byte or Decimal byte (0)	2020.08.18
[Browser API] fetch API를 알아보자! (0)	2020.01.05
[Babel] 사용기(1) (0)	2019.06.26
파일(Image) 용량을 확인하는 방법_v1 (0)	2019.06.05
배열의 중복값 제거 (0)	2019.04.25

불타는 코딩🔥