[JS] Window.localStorage 로 값 조회, 추가(저장), 수정, 삭제

현재 origin localStorage 공간에 접근하기 위해 사용될 수 있는 Storage 객체.

 

Window.localStorage 

---

 

Web Storage API는 브라우저가 키 / 값 쌍을 안전하게 저장할 수있는 메커니즘을 제공합니다. (참고)

localStorage속성은 사용자 local의 Storage객체에 접근하게 해줍니다. localStorage는 sessionStorage와 비슷합니다. 유일한 차이점은 localStorage에 저장된 데이터는 만료 기간이 없지만, sessionStorage에 저장된 데이터는 세션이 끝나면(브라우저가 종료되면) 지워진다는 것입니다. (참고)

 

myStorage = window.localStorage;

 

localStorage또는 sessionStorage에 저장될 데이터는 프로토콜 페이지에 명시되어 있습니다.
사용자 현재 도메인의 로컬 Storage객체에 접근해 Storage.setItem()를 사용하여 데이터를 추가합니다.
모든 key와 value는 항상 string으로 저장됩니다. (object와 integer는 string으로 자동 변환됩니다.)

 

var cat = localStorage.getItem('myCat'); //조회
localStorage.setItem('myCat', 'Tom'); //추가
localStorage.removeItem('myCat'); //삭제
localStorage.clear(); // 전체삭제

 

키-값으로 저장되며 페이지로드를 통해 새로고침, 재접속 후에도 유지됩니다. Storage.getItem(), Storage.setItem() 메소드를 사용하여 액세스 할 수 있습니다. 아래는 새로운 속성 설정을 추가하는 세 가지 방법입니다. 결과는 동일합니다.

 

localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');

 

웹 스토리지를 사용해서 제작된 Web Storage Demo라는 데모 사이트도 있습니다. 색상, 글꼴, 장식 이미지를 사용자가 지정할 수 있고, 옵션을 선택하면 즉시 업데이트되며, localStorage에 저장하여 잘 작동합니다. 

 

변경 후 브라우저를 껐다 켜도 저장되어 있습니다.

 

 

 

 

localStorage 지원 및 사용 가능 여부 테스트

 

function storageAvailable(type) {
    var storage;
    try {
        storage = window[type];
        var x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return e instanceof DOMException && (
            // everything except Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            (storage && storage.length !== 0);
    }
}

// 사용 방법
if (storageAvailable('localStorage')) {
  // Yippee! We can use localStorage awesomeness
}
else {
  // Too bad, no localStorage for us
}

 

참고 : iOS 5.1버전부터, 모바일 사파리에선 localStorage 데이터를 cache 폴더에  저장합니다. 이 폴더는 용량이 부족하다거나 할 때 OS의 명령에 따라 이따금씩 비워집니다. 모바일 사파리의 Private Browsing모드에서도 localStorage를 온전히 사용하는 것을 막고 있습니다.

 

 

---

 

다음으로 window.localStorage와 같이 보면 좋을 내용, Window.sessionStorage를 비교하며 알아보겠습니다. sessionStorage는 Window.localStorage와 유사하지만 유일한 차이점은, localStorage에 저장되는 데이터는 만료 시점이 없지만 sessionStorage에 저장된 데이터는 페이지 세션이 종료되면 바로 지워진다는 점입니다.

 

 

 

Window.sessionStorage

---

• localStorage에 저장되는 데이터는 만료 시점이 없지만 sessionStorage에 저장된 데이터는 페이지 세션이 종료되면 바로 지워집니다.

• 페이지 세션은 브라우저가 열리고 페이지가 다시 보여지거나 복구되어도 유지됩니다.

• 세션 쿠키의 동작과는 달리 새 탭이나 윈도우에서 페이지를 열게 되면 새로운 세션이 생성됩니다.

• URL이 같은 여러 탭/윈도우를 열게 되면 각 탭/윈도우 별로 sessionStroage를 생성합니다.

• 탭/윈도우를 닫으면 세션이 종료되고 sessionStorage 안의 내용이 초기화됩니다.

 

참고 :  데이터는 페이지 프로토콜에 따라 별도의 sessionStorage에 저장되는데, 예로 http://example.com 은 https://example.com와 다른 sessionStorage를 사용합니다. (출처)

 

 

 

사용 용법

 

// sessionStorage에 데이터 저장
sessionStorage.setItem('key', 'value');

// sessionStorage에서 저장된 데이터 가져옴
var data = sessionStorage.getItem('key');

 

아래는 텍스트 필드의 문장을 자동 저장하여 브라우저가 의도치 않게 재시작 되었을 경우 자동으로 텍스트 필드의 내용을 저장된 문장으로 복구하여 작성한 내용이 사라지지 않게 하는 예제입니다. 

 

// 저장할 텍스트 필드의 문장을 가져옵니다.
var field = document.getElementById("field");
 
// 만약 autosave키의 값이 있다면
// (이는 페이지가 의도치 않게 재시작 되었을 경우에만 해당됨)
if (sessionStorage.getItem("autosave")) {
  // 저장된 문장을 텍스트 필드로 복구합니다.
  field.value = sessionStorage.getItem("autosave");
}
 
// 텍스트 필드 변경을 확인하고자 이벤트 리스너를 등록 합니다.
field.addEventListener("change", function() {
  // session storage object에 변경된 값을 저장합니다.
  sessionStorage.setItem("autosave", field.value);
});