JavaScript How to add JSON to localStorage

기본 활용법

(1) 기본적인 개념에 대한 설명

JavaScript

localStorage.setItem("recentSearchWord", JSON.stringify(recentSearchWordArray));

// Application의 localStorage에 "recentSearchWord"라는 key명칭으로, recentSearchWordArray라는 JSON파일을 문자열(string)의 형태로 value로서 밀어넣는다.

const recentSearchWordArray = JSON.parse(localStorage.getItem("recentSearchWord"));

// Application의 localStorage에 "recentSearchWord"라는 명칭으로 들어가 있는, recentSearchWord라는 value를 JSON파일의 형태로 꺼내온 후 이를 recentSearchWordArray에 담는다.

 

(2) 텍스트바에 입력된 텍스트를 localStorage에 밀어넣기

JavaScript

const textBar = document.querySelector(".textBar");

textBar.addEventListener("keyup", function (e) {

  if (e.keyCode === 13) {

    localStorage.setItem("Records", textBar.value);

  }

});

 

ON BROWSER

텍스트바에 입력된 "마우스"를 Local Storage에 밀어넣은 모습

 

 

 

(3) localStorage에 들어있는 텍스트를 콘솔 로그에 출력하기

JavaScript

const textBar = document.querySelector(".textBar");

textBar.addEventListener("keyup", function (e) {

  if (e.keyCode === 13) {

    localStorage.setItem("Records", textBar.value);

  }

});

console.log(localStorage.getItem("Records"));

 

ON BROWSER

 

 

 

 

 

localStorage에 배열 집어넣기

(1) 당나귀, 소, 말로 이루어진 배열을 localStorage에 집어넣기

JavaScript

const textBar = document.querySelector(".textBar");

const textRecords = [];

textBar.addEventListener("keyup", function (e) {

  if (e.keyCode === 13) {

    textRecords.push(textBar.value);

    localStorage.setItem("Records", textRecords);

  }

});

console.log(textRecords);

 

ON BROWSER

텍스트바에 당나귀, 소, 말을 차례로 입력했을 때. 배열이었음에도 불구하고 텍스트화되어 있다.

 

 

 

(2) localStorage에 들어가 있는 배열을 콘솔 로그에 출력하기

JavaScript

const textBar = document.querySelector(".textBar");

const textRecords = [];

textBar.addEventListener("keyup", function (e) {

  if (e.keyCode === 13) {

    textRecords.push(textBar.value);

    localStorage.setItem("Records", textRecords);

  }

});

console.log(localStorage.getItem("Records"));

 

ON BROWSER

텍스트로 들어가버렸으므로 당연한 듯 텍스트로 빠져나온다.

 

 

 

(3) JSON.stringify를 이용해 배열로 집어넣으면?

JavaScript

const textBar = document.querySelector(".textBar");

const textRecords = [];

textBar.addEventListener("keyup", function (e) {

  if (e.keyCode === 13) {

    textRecords.push(textBar.value);

    localStorage.setItem("Records", JSON.stringify(textRecords));

  }

});

console.log(localStorage.getItem("Records"));

 

ON BROWSER

자동차, 항공기, 기차를 차례로 입력하니 배열 형태로 localStorage에 저장되었고, 마찬가지로 배열 형태로 콘솔에 출력된다.