특징

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

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

ES6가 원활히 돌아가기 위해서 최신 브라우저가 필요하다.

하지만 모두가 최신 브라우저를 쓰지않기때문에 오래된 문법을 작성할 수 밖에 없는데

Babel은 최신 문법을 사용성이 넓은 범위의 문법으로 변환시켜주기 때문에

실험정신이 있는 개발자에게 필수 플러그인이다.

 

[1] html 코드삽입으로 바벨사용하기

<div id="result"></div>
/* support IE9+ */
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
//babel 을 불러온다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
// babel 실행에 필요한 기능을 불러온다.

<script type="text/babel" data-presets="es2015,stage-2">
// type="text/babel" data=presets="es2015, stage-2"
// babel을 사용할 것이고, es2015를 사용할 것이고, stage-2 는 Babel 플러그인의 안정적인 버전이다.

    const hello = (data) => {
        document.querySelector('#result').innerText = data
    }
    
    hello("hello");
</script>

 

 

 

참고: https://babeljs.io/docs/en/

 

Babel · The compiler for next generation JavaScript

The compiler for next generation JavaScript

babeljs.io

 

 

저작자표시

'Javascript' 카테고리의 다른 글

[Browser API] fetch API를 알아보자!  (0) 2020.01.05
[WebAPI] window.localStorage 부시기!  (5) 2019.09.29
파일(Image) 용량을 확인하는 방법_v1  (0) 2019.06.05
배열의 중복값 제거  (0) 2019.04.25
[자료구조]  (0) 2019.04.25

document.querySelectorAll('targets') 으로 불러올 경우

nodeList가 유사배열(?)로 넘어오기때문에 [].forEach.call() 을 사용한다.

html

<button class="target-btn"> button01 </button>
<button class="target-btn"> button02 </button>
<button class="target-btn"> button03 </button>
<button class="target-btn"> button04 </button>
<button class="target-btn"> button05 </button>

 

javascript

function enterEvent(_targets, _event, _callback){
        [].forEach.call(_targets, _target => {
            _target.addEventListener(_event, function(e){
                console.log( this, e )
            })
        })
    }
    
    let targets = document.querySelectorAll('.target-btn');
    enterEvent(targets,'click');

 

저작자표시

'Javascript' 카테고리의 다른 글

배열의 중복값 제거  (0) 2019.04.25
[자료구조]  (0) 2019.04.25
base64 인코딩, 디코딩하기!  (0) 2019.04.11
[Object] Object 다루기 - map, filter 로 값 추출하기  (0) 2019.04.11
Promise Chain 구성하기  (0) 2019.04.11

Object(객체) 다루기

Object(객체) 란 무엇인가?

1. key: value 쌍을 가지는 자료구조입니다.

2. value 에 문자, 숫자, 배열, 객체, 함수를 할당할 수 있습니다.

 

1. 오브젝트 데이터 생성

const objPersons = {
  persons: [
    {name: "kim", age: 20, gender: "man"}, 
    {name: "vicky", age: 22, gender: "women"},
    {name: "gloria", age: 42, gender: "women"},
    {name: "gom", age: 27, gender: "man"},
  ]
};

Object 안에 Array 가 있고, 그 Array 안에 다시 Object가 배치되어있습니다.

objPersons는 현재 { key: [ {key: value}, {key: value}, {key: value}, {key: value} ] } 이러한 형식과 동일합니다.

 

2. 오브젝트 데이터 가공하기

const {persons} = objPersons
// ES5: const persons = Object.assign([], objPersons.persons)와 동일
const mapPersons = Object.values(persons).map(v => Object.keys(v).map(v2 => v[v2]))
const filteredPersonsAge = persons.filter( v => v.age > 25 )

작업 순서대로 나열해 보겠습니다.

1. objProject 에서 persons 만 빼와서 블록상수로 참조합니다.

2. persons의 value들을 돌며 key와 일치하는 값들을 mapPersons에 새로운 배열을 반환합니다.

3. persons의 value들을 돌며 일치한 값만 filteredPersonsAge에 새로운 배열을 반환합니다. 

 

3. 값 확인하기

console.log(persons)
>>> [ 
  { name: 'kim', age: 20, gender: 'man' },
  { name: 'vicky', age: 22, gender: 'women' },
  { name: 'gloria', age: 42, gender: 'women' },
  { name: 'gom', age: 27, gender: 'man' } 
]

console.log(mapPersons)
>>> [
  [ 'kim', 20, 'man' ],
  [ 'vicky', 22, 'women' ],
  [ 'gloria', 42, 'women' ],
  [ 'gom', 27, 'man' ] 
]

console.log(filteredPersonsAge)
>>> [
  { name: 'gloria', age: 42, gender: 'women' },
  { name: 'gom', age: 27, gender: 'man' } 
]
저작자표시

'Javascript' 카테고리의 다른 글

배열의 중복값 제거  (0) 2019.04.25
[자료구조]  (0) 2019.04.25
다수의 엘리먼트에 이벤트 등록하기  (0) 2019.04.11
base64 인코딩, 디코딩하기!  (0) 2019.04.11
Promise Chain 구성하기  (0) 2019.04.11 
function chain( _x ){
  return new Promise( (resolve, reject) => {
    return resolve( _x ); 
  }) 
} 

chain("hello")
.then( res => { 
    console.log( '1', res );  //  console >>> '1', 'hello'
    return res; 
})
.then( res => { 
    console.log( '2', res );  //  console >>> '2', 'hello'
    return res; 
})
. then( res => {
    console.log( '3', res );  //  console >>> '3', 'hello' 
    return res; 
});

// return 값을 주면 이후 체이닝되는 then 에게 상속된다.
저작자표시

'Javascript' 카테고리의 다른 글

배열의 중복값 제거  (0) 2019.04.25
[자료구조]  (0) 2019.04.25
다수의 엘리먼트에 이벤트 등록하기  (0) 2019.04.11
base64 인코딩, 디코딩하기!  (0) 2019.04.11
[Object] Object 다루기 - map, filter 로 값 추출하기  (0) 2019.04.11

+ Recent posts

티스토리툴바