[spring] localStorage 사용법!

[spring] localStorage 사용법!

✔️ localStorage 사용법

: 로컬 스토리지는 데이터에 보존기간 제한이 없다.

: 도메인당 하나만 생성. 동일한 브라우저만 접근 가능하다.

: 쿠키를 이용한 설정을 대신하기에 적당하다.

✨ 삭제하고 싶으면 localStorage.clear(); // 모두 지울 수 있다!

<p>
	<input type="text" id="subject" placeholder="좋아하는 과목">
	<button type="button" onclick="addSubject()">추가</button>
	<button type="button" onclick="deleteSubject()">삭제</button>
</p>
<div id="log"></div>

📓 주요 메소드

- length : 스토리지에 저장된 데이터의 수를 반환

- key(index) : 지정된 인덱스의 키를 반환하고 키가 없으면 null 반환

- getItem(key) : 지정된 키에 대응하는 데이터를 반환

- setItem(key, data) : 지정된 키로 스토리지에 데이터를 저장

- removeItem(key) : 지정된 키에 대응하는 데이터를 삭제

- clear() : 모든 데이터를 스토리지에서 삭제

📓 사용예

- 저장

localStorage.subject = "java";

localStorage.setItem("subject", "java");

- 읽기

var c = localStorage.subject ;

var c = localStorage.getItem["subject"];

✔️ JSON.parse

: JSON 문자열의 구문을 분석하고, 그 결과를 javaScript 값이나 객체로 생성한다!

자바스크립트 객체로 변환된 데이터는 . 이나 [] 기호를 사용해 속성에 접근할 수 있다. 

✔️ JSON.stringify()

: javaScript 객체를 JSON 문자열로 반환한다.

예제 1

- 데이터 추가하기

: setItem 으로 저장, getItem 으로 데이터를 불러올 수 있다.

✨ 기존에 있던 데이터에 추가해야하기 때문에 "subject" 로 저장된 로컬 스토리지 데이터 getItem 으로 가져오기

: id가 subject인 input 에 입력되는 값을 가져와서 'ss' 값에 push() 한다.

: JSON.stringify(ss) 하여 로컬 스토리지에 set 하면 끝!

let ss = JSON.parse(localStorage.getItem("subject")) || [];
 
let s = document.getElementById("subject").value.trim();
ss.push(s);
localStorage.setItem("subject", JSON.stringify(ss));

- 데이터 결합하여 보기

let s = ss.join(); //문자열 결합

예제 2

- 이벤트 추가하기

<ul class="list">
	<li id="java">자바</li>
	<li id="oracle">오라클</li>
	<li id="html">HTML</li>
	<li id="javascript">javascript</li>
	<li id="spring">spring</li>
	<li id="css">css</li>
</ul>

- language 로 저장된 로컬 스토리지 데이터 가져와보기

- 저장된 데이터들을 forEach 로 돌려서 i 에 className 'clk' 추가

- 클릭 이벤트

: language 에서 id 로 index 검색을 한다. 검색해서 language 에 이미 데이터가 있으냐 없느냐에 따라 classname 속성을 주거나 없앤다. 

처음 찍는거면 language 에 없는 데이터니까 index 값이 -1이 나와서 className 으로 'clk' 클래스를 갖는다.

<script type="text/javascript">
let language = JSON.parse(localStorage.getItem("language")) || [];
 
language.forEach( (i) => document.getElementById(i).className = 'clk' );
 
document.querySelector(".list").addEventListener("click", function(e){
    let id = e.target.id;
    let item = e.target;
    console.log(item);
 
    //아~ language 에 이미 있냐 없냐에 따라 없으면 -1 이니까 clk 추가해줌
    let index = language.indexOf(id);
    console.log(index);
 
    if(index === -1) {
        language.push(id);
        item.className = 'clk';
    } else {
        language.splice(index, 1);
        item.className = '';
    }
 
    localStorage.setItem("language", JSON.stringify(language));
 
});
 
</script>

예제 3

- 카운트 횟수 추가하기

function clickCount() {
	/*
	let s = document.getElementById("log").value++;
	let ss = JSON.parse(localStorage.getItem("log")) || [];
	
	ss.push(s);
	localStorage.setItem("log", JSON.stringify(ss));
	
	viewCount();
	*/
	
	let count = localStorage.count;
	count = count ? Number(count)+1 : 1;
	localStorage.count = count;
	viewCount();
	
}
 
function clickDelete() {
	/*
	localStorage.removeItem("log");
	viewCount();
	*/
	let count = localStorage.count;
	count = count ? Number(count)-1 : 0;
	count < 0 ? 0 : count;
	
	localStorage.setItem("count", count);
	viewCount();
	
	
}
 
function viewCount() {
	/*
	let ss = JSON.parse(localStorage.getItem("log")) || [];
	document.getElementById("log").innerHTML = "카운트 횟수 : " + ss;
	*/
	let count = localStorage.getItem("count");
	count = count ? count : "";
	document.getElementById("log").innerHTML = "카운트 횟수 : " + count;
	
}