Web Storage APIλŠ” λΈŒλΌμš°μ €κ°€ μΏ ν‚€λ₯Ό μ‚¬μš©ν•˜λŠ” 것보닀 훨씬 더 직관적인 λ°©λ²•μœΌλ‘œ ν‚€-κ°’ μŒμ„ μ•ˆμ „ν•˜κ²Œ μ €μž₯ν•  수 μžˆλŠ” λ©”μ»€λ‹ˆμ¦˜μ„ μ œκ³΅ν•˜λŠ” ν•©λ‹ˆλ‹€. mdn-using-the-web-storage-api

둜컬 μ €μž₯μ†ŒλŠ” 쿠킀보닀 μ €μž₯ μš©λŸ‰μ΄ 크며, μ €μž₯된 데이터λ₯Ό μ„œλ²„λ‘œ μ „μ†‘ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

Web Storage API의 Storage μΈν„°νŽ˜μ΄μŠ€mdn-storage-interfaceλŠ” νŠΉμ • 도메인에 λŒ€ν•œ μ„Έμ…˜ μ €μž₯μ†Œ λ˜λŠ” 둜컬 μ €μž₯μ†Œμ— λŒ€ν•œ μ•‘μ„ΈμŠ€λ₯Ό μ œκ³΅ν•˜λ©° μ €μž₯된 데이터 ν•­λͺ©μ„ μΆ”κ°€, μˆ˜μ • λ˜λŠ” μ‚­μ œν•  수 μžˆμŠ΅λ‹ˆλ‹€.

동일 원본 Origin (도메인 및 ν”„λ‘œν† μ½œ)μ—μ„œλŠ” 데이터λ₯Ό μ €μž₯ν•œ νŽ˜μ΄μ§€κ°€ 달라도 λ™μΌν•œ 둜컬 μ €μž₯μ†Œμ— λŒ€ν•΄ I/Oκ°€ κ°€λŠ₯ν•©λ‹ˆλ‹€.

Web Storage μΈν„°νŽ˜μ΄μŠ€λŠ” window 객체의 localStorage 와 SessionStorage μ†μ„±μœΌλ‘œ κ΅¬ν˜„λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.

두 μ†μ„±μ˜ μœ μΌν•œ 차이점은 localStorage에 μ €μž₯된 λ°μ΄ν„°μ—λŠ” 만료 μ‹œκ°„μ΄ μ—†μ§€λ§Œ, sessionStorage에 μ €μž₯된 λ°μ΄ν„°λŠ” λΈŒλΌμš°μ§• μ„Έμ…˜μ΄ λλ‚˜λ©΄ (즉, λΈŒλΌμš°μ €κ°€ λ‹«νž λ•Œ) μ§€μ›Œμ§‘λ‹ˆλ‹€.

Storage Interfacemdn-storage-interface

둜컬 μ €μž₯μ†Œμ— 데이터λ₯Ό ν‚€-κ°’ ν˜•νƒœλ‘œ μ €μž₯ν•©λ‹ˆλ‹€.

값은 λ¬Έμžμ—΄ ν˜•μ‹λ§Œμ„ μ§€μ›ν•©λ‹ˆλ‹€.

λͺ…μ„Έ Specifications

Storage Interface 의 λͺ…μ„Έstorage-interface-sepcificationλŠ” μ•„λž˜μ™€ κ°™μŠ΅λ‹ˆλ‹€.

interface Storage {
  readonly attribute unsigned long length;
  DOMString? key(unsigned long index);
  getter DOMString? getItem(DOMString key);
  setter void setItem(DOMString key, DOMString value);
  deleter void removeItem(DOMString key);
  void clear();
};

λΈŒλΌμš°μ € 지원 확인 Check Browser support

if (typeof Storage !== "undefined") {
    // ν˜„μž¬ λΈŒλΌμš°μ €λŠ” Web Storage APIλ₯Ό μ§€μ›ν•©λ‹ˆλ‹€.
} else {
    // ν˜„μž¬ λΈŒλΌμš°μ €λŠ” Web Storage APIλ₯Ό μ§€μ›ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
}

속성 Properties

Storage.length

둜컬 μ €μž₯μ†Œμ— μ €μž₯된 λ°μ΄ν„°μ˜ 수λ₯Ό κ°€μ Έμ˜΅λ‹ˆλ‹€.

var storage = window.localStorage;

storage.setItem("key1", "value1");
storage.setItem("key2", "value2");
storage.setItem("key3", "value3");

var countOfKeyValuePairs = storage.length; // 3

λ©”μ„œλ“œ Methods

Storage.key(n)

n 번째 ν‚€λ₯Ό λ°˜ν™˜ν•©λ‹ˆλ‹€.

var storage = window.localStorage;

storage.setItem("key1", "value1");
storage.setItem("key2", "value2");
storage.setItem("key3", "value3");

storage.key(0); // ==> key1
storage.key(1); // ==> key2
storage.key(2); // ==> key3

Storage.setItem(k, v)

둜컬 μ €μž₯μ†Œμ— 데이터λ₯Ό ν‚€ k, κ°’ v 둜 μ €μž₯ν•©λ‹ˆλ‹€.

μƒˆλ‘œμš΄ ν‚€ k 둜 데이터λ₯Ό μž…λ ₯ν•˜λ©΄ 둜컬 μ €μž₯μ†Œμ— μƒˆλ‘œμš΄ ν•­λͺ©μ΄ μ €μž₯되고, μ‘΄μž¬ν•˜λŠ” ν‚€ k λ₯Ό μž…λ ₯ν•˜λ©΄ κΈ°μ‘΄ ν•­λͺ©μ˜ 값이 κ°±μ‹ λ©λ‹ˆλ‹€.

var storage = window.localStorage;

storage.setItem("key1", "value1"); // μƒˆλ‘œμš΄ ν•­λͺ©μ΄ 좔가됨
storage.setItem("key2", "value2"); // μƒˆλ‘œμš΄ ν•­λͺ©μ΄ 좔가됨
storage.setItem("key1", "value3"); // κΈ°μ‘΄ ν‚€ key1 ν•­λͺ©μ˜ 값이 'value3' 으둜 갱신됨

Storage.getItem(k)

둜컬 μ €μž₯μ†Œμ—μ„œ ν‚€ k에 ν•΄λ‹Ήν•˜λŠ” ν•­λͺ©μ˜ 값을 λ°˜ν™˜ν•©λ‹ˆλ‹€.

var storage = window.localStorage;

storage.setItem("key1", "value1");
storage.setItem("key2", "value2");

var val1 = storage.getItem("key1"); // ==> 'value1'
var var2 = storage.getItem("key2"); // ==> 'value2'
var var3 = storage.getItem("key3"); // ==> undefined

Storage.removeItem(k)

둜컬 μ €μž₯μ†Œμ—μ„œ ν‚€ k에 ν•΄λ‹Ήν•˜λŠ” ν•­λͺ©μ„ μ œκ±°ν•©λ‹ˆλ‹€.

var storage = window.localStorage;
var countOfKeyValuePairs = 0;

storage.setItem("key1", "value1");
storage.setItem("key2", "value2");

countOfKeyValuePairs = storage.length; // 2

storage.removeItem("key1");

countOfKeyValuePairs = storage.length; // 1

Storage.clear()

둜컬 μ €μž₯μ†Œλ₯Ό μ΄ˆκΈ°ν™”ν•©λ‹ˆλ‹€.

var storage = window.localStorage;
var countOfKeyValuePairs = 0;

storage.setItem("key1", "value1");
storage.setItem("key2", "value2");

countOfKeyValuePairs = storage.length; // 2

storage.clear();

countOfKeyValuePairs = storage.length; // 0

λΈŒλΌμš°μ € ν˜Έν™˜μ„± Browser compatibility

μ›Ή λΈŒλΌμš°μ €λ§ˆλ‹€ 둜컬 μ €μž₯μ†Œ localStorage, sessionStorage μ €μž₯ μˆ˜μ€€μ΄ λ‹€λ¦…λ‹ˆλ‹€. Web Storage Support Testweb-storage-support-test μ‚¬μ΄νŠΈμ—μ„œ ν˜„μž¬ μ›Ή λΈŒλΌμš°μ €μ˜ μ €μž₯ μˆ˜μ€€μ„ λŒ€λž΅μ μœΌλ‘œ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

λ°μŠ€ν¬ν†± Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
localStorage 4 3.5 8 10.50 4
sessionStorage 5 2 8 10.50 4

λͺ¨λ°”일 Mobile

Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 ? 8 11 3.2ios-5-1-safarimobile

window.localStorage mdn-window-localstorage

λ§Œλ£Œμ‹œκ°„μ΄ μ—†λŠ” 데이터λ₯Ό ν‚€-κ°’ ν˜•νƒœλ‘œ μ €μž₯ν•©λ‹ˆλ‹€.

var storage = window.localStorage;
storage.setItem("key1", "value1");
var val1 = storage.getItem("key1");

window.sessionStorage mdn-window-sessionstorage

λΈŒλΌμš°μ§• μ„Έμ…˜μ΄ λλ‚˜λ©΄ μ΄ˆκΈ°ν™”λ˜λŠ” 데이터λ₯Ό ν‚€-κ°’ ν˜•νƒœλ‘œ μ €μž₯ν•©λ‹ˆλ‹€.

var storage = window.sessionStorage;
storage.setItem("key1", "value1");
var val1 = storage.getItem("key1");

  1. MDN: Using the Web Storage API↩
  2. MDN: storage↩
  3. The Storage Interface↩
  4. Web Storage Support Test↩
  5. iOS 5.1λΆ€ν„° Safari Mobile 은 localStorage 데이터λ₯Ό μΊμ‹œ 디렉터리에 μ €μž₯ν•©λ‹ˆλ‹€. μΊμ‹œ λ””λ ‰ν„°λ¦¬λŠ” 일반적으둜 곡간이 λΆ€μ‘±ν•œ 경우 μ‹œμŠ€ν…œμ— μ˜ν•΄ 정리될 μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.↩
  6. MDN: window.localStorage↩
  7. MDN: window.sessionStorage↩