JavaScript
웹 저장소

통사론

• localStorage.setItem (name, value);

• localStorage.getItem (name);

• localStorage.name = 값;

• localStorage.name;

• localStorage.clear ()

• localStorage.removeItem (name);

매개 변수

비고

localStorage 사용

localStorage 객체는 문자열의 키 - 값 저장을 영구적으로 제공합니다 (영구적 인 제한은 아님). 모든 변경 사항은 동일한 원점의 다른 모든 창 / 프레임에서 즉시 볼 수 있습니다. 사용자가 저장된 데이터를 지우거나 만료 한도를 설정하지 않는 한 저장된 값은 무기한 보존됩니다. localStorage는 값을 가져오고 설정하기 위해 맵과 같은 인터페이스를 사용합니다.

localStorage.setItem('name', "John Smith");
console.log(localStorage.getItem('name')); // "John Smith"

localStorage.removeItem('name');
console.log(localStorage.getItem('name')); // null

단순한 구조화 된 데이터를 저장하려는 경우 JSON 을 사용 하여이를 저장 용 문자열과 직렬화 할 수 있습니다 .

var players = [{name: "Tyler", score: 22}, {name: "Ryan", score: 41}];
localStorage.setItem('players', JSON.stringify(players));

console.log(JSON.parse(localStorage.getItem('players')));
// [ Object { name: "Tyler", score: 22 }, Object { name: "Ryan", score: 41 } ]

브라우저의 localStorage 한도

모바일 브라우저 :

데스크톱 브라우저 :

저장 이벤트

localStorage에 설정된 값이있을 때마다 storage 이벤트가 동일한 원점의 다른 모든 windows 에 전달됩니다. 이 기능은 서버를 다시로드하거나 통신하지 않고도 다른 페이지간에 상태를 동기화하는 데 사용할 수 있습니다. 예를 들어 입력 요소의 값을 단락 텍스트로 다른 창에 반영 할 수 있습니다.

var input = document.createElement('input');
document.body.appendChild(input);

input.value = localStorage.getItem('user-value');

input.oninput = function(event) {
  localStorage.setItem('user-value', input.value);
};

var output = document.createElement('p');
document.body.appendChild(output);

output.textContent = localStorage.getItem('user-value');

window.addEventListener('storage', function(event) {
  if (event.key === 'user-value') {
    output.textContent = event.newValue;
  }
});

노트

도메인이 스크립트를 통해 수정 된 경우 Chrome, Edge 및 Safari에서 이벤트가 실행되지 않거나 catch 가능하지 않습니다.

// page url: http://sub.a.com/1.html
document.domain = 'a.com';

var input = document.createElement('input');
document.body.appendChild(input);

input.value = localStorage.getItem('user-value');

input.oninput = function(event) {
  localStorage.setItem('user-value', input.value);
};

// page url: http://sub.a.com/2.html
document.domain = 'a.com';

var output = document.createElement('p');
document.body.appendChild(output);

// Listener will never called under Chrome(53), Edge and Safari(10.0).
window.addEventListener('storage', function(event) {
  if (event.key === 'user-value') {
    output.textContent = event.newValue;
  }
});

sessionStorage

sessionStorage 객체는 localStorage와 동일한 저장소 인터페이스를 구현합니다. 그러나 동일한 출처의 모든 페이지와 공유되는 대신에 sessionStorage 데이터는 모든 창 / 탭마다 별도로 저장됩니다. 저장된 데이터는 열려있는 동안 해당 창 / 탭의 페이지간에 유지되지만 다른 곳에서는 볼 수 없습니다.

var audio = document.querySelector('audio');

// Maintain the volume if the user clicks a link then navigates back here.
audio.volume = Number(sessionStorage.getItem('volume') || 1.0);
audio.onvolumechange = function(event) {
  sessionStorage.setItem('volume', audio.volume);
};

sessionStorage에 데이터 저장

sessionStorage.setItem('key', 'value');

sessionStorage에서 저장된 데이터 가져 오기

var data = sessionStorage.getItem('key');

sessionStorage에서 저장된 데이터 제거

sessionStorage.removeItem('key')

저장 용량 지우기

저장 용량을 지우려면 간단히 실행하십시오.

localStorage.clear();

오류 조건

대부분의 브라우저는 쿠키를 차단하도록 구성되어 있으면 localStorage 도 차단합니다. 그것을 사용하려고 시도하면 예외가 발생합니다. 이 경우 를 관리하는 것을 잊지 마십시오.

var video = document.querySelector('video')
try {
    video.volume = localStorage.getItem('volume')
} catch (error) {
    alert('If you\'d like your volume saved, turn on cookies')
}
video.play()

오류가 처리되지 않으면 프로그램이 제대로 작동하지 않습니다.

저장소 항목 제거

브라우저 저장소 ( setItem 의 반대편)에서 특정 항목을 제거하려면 removeItem

localStorage.removeItem("greet");

예:

localStorage.setItem("greet", "hi");
localStorage.removeItem("greet");

console.log( localStorage.getItem("greet") ); // null

( sessionStorage 에도 동일하게 적용됩니다)

스토리지 취급의 간편한 방법

localStorage , sessionStorage 는 JavaScript 객체 이므로 해당 객체 를 그대로 취급 할 수 있습니다.
.getItem() , .setItem() 등의 저장 메소드를 사용하는 대신 다음과 같은 간단한 방법이 있습니다.

// Set
localStorage.greet = "Hi!"; // Same as: window.localStorage.setItem("greet", "Hi!");

// Get
localStorage.greet;         // Same as: window.localStorage.getItem("greet");

// Remove item
delete localStorage.greet;  // Same as: window.localStorage.removeItem("greet");

// Clear storage
localStorage.clear();

예:

// Store values (Strings, Numbers)
localStorage.hello = "Hello";
localStorage.year  = 2017;    

// Store complex data (Objects, Arrays)
var user = {name:"John", surname:"Doe", books:["A","B"]};
localStorage.user = JSON.stringify( user );

// Important: Numbers are stored as String
console.log( typeof localStorage.year ); // String

// Retrieve values
var someYear = localStorage.year; // "2017"

// Retrieve complex data
var userData = JSON.parse( localStorage.user );
var userName = userData.name; // "John"

// Remove specific data
delete localStorage.year; 

// Clear (delete) all stored data
localStorage.clear();

localStorage 길이

localStorage.length 속성은 요소 수를 나타내는 정수를 반환 localStorage

예:

항목 설정

localStorage.setItem('StackOverflow', 'Documentation');
localStorage.setItem('font', 'Helvetica');
localStorage.setItem('image', 'sprite.svg');

길이 가져 오기

localStorage.length; // 3