Web Storage

HTML5에서 제공하는 브라우저에 데이터를 저장하는 방식

KEY-VALUE

localStorage: 영구저장, sessionStorage: 임시저장

쿠키는 데이터가 매번 서버로 전송되나 웹스토리지는 클라이언트단에만 머문다

단순문자열 뿐만 아니라 스크립트의 객체정보도 저장가능

용량제한이없다, 키밸류 모두 스트링

localStorage.setItem(‘name’, ‘Pat’);
localStorage.getItem(‘name’);  || localStorage[‘name’];
localStorage.removeItem(‘name’)  // delete
localStorage.clear();  // delete all
localStorage.length();  // number of keys
localStorage.key(val);  //  값으로 키를 찾음

window.addEventListener(‘storage’, function(e) { … }, false);

localStorage는 기본적으로 키:밸류로만 저장가능하기에 객체는 JSON String으로 변환하여 넣어준후, 다시 객체로 변환하여 꺼내쓴다.

var testObj = { aa:1, bb:2, cc:3};
localStorage.setItem(“testObj”, JSON.stringify(testObj));

var result = localStorage.getItem(“testObj”);
console.log(“result”, JSON.parse(result));