Storage

 

Web Storage API 中的 Storage 介面提供了存取特定 domain session 及本機儲存的方法。舉例而言,它能夠對存取的資料進行新增、刪除、修改,

在操作上,如果是對象是 domain session storage ,會呼叫 Window.sessionStorage 。而若是 local storage,則呼叫 Window.localStorage

屬性

Storage.length Read only
返回一數字,代表儲存在 Storage 中的物件的數量。

方法

Storage.key()
當傳入一數字 n, 會返回 storage 裡第 n 個值的 key 值。
Storage.getItem()
當傳入一 key 值, 會返回 storage 裡此 key 值對應的 value 。
Storage.setItem()
當傳入 key 及 value 的值, 會在 storage 裡新增此 key 及 value 值,若 key 已存在,則會把值更新成傳入的 value。
Storage.removeItem()
當傳入一 key 值, 會把此 key 從 storage 裡刪除。
Storage.clear()
執行此方法,會刪除所有在 storage 裡的 key。

範例

在這裡,我們藉由呼叫 localStorage 來存取 Storage 物件,首先使用 !localStorage.getItem('bgcolor') 來確認 storage 裡是否有項目存在。

如果有,則執行函示 setStyles() ,這個函示使用 Storage.getItem() 取得 storage 的值,並且用這些值更新頁面樣式 。

如果沒有,便執行另一個函示 populateStorage(),他使用 Storage.setItem() 先設定 storage 項目的值,然後才執行setStyles()

if(!localStorage.getItem('bgcolor')) {
  populateStorage();
}
setStyles();

function populateStorage() {
  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
  localStorage.setItem('font', document.getElementById('font').value);
  localStorage.setItem('image', document.getElementById('image').value);
}

function setStyles() {
  var currentColor = localStorage.getItem('bgcolor');
  var currentFont = localStorage.getItem('font');
  var currentImage = localStorage.getItem('image');

  document.getElementById('bgcolor').value = currentColor;
  document.getElementById('font').value = currentFont;
  document.getElementById('image').value = currentImage;

  htmlElem.style.backgroundColor = '#' + currentColor;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute('src', currentImage);
}

注意: 想要看這個範例完整運行,可以參考我們的  Web Storage Demo.

規範

Specification Status Comment
HTML Living Standard
The definition of 'Storage' in that specification.
Living Standard  

瀏覽器相容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
StorageChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android ?
clearChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android ?
getItemChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android ?
keyChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android ?
lengthChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android ?
removeItemChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android ?
setItemChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support 18Firefox Android Full support 6Opera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

See also