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 |
瀏覽器相容性
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Storage | Chrome Full support 4 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 8 | Opera Full support 10.5 | Safari Full support 4 | WebView Android Full support Yes | Chrome Android Full support 18 | Firefox Android Full support 6 | Opera Android Full support 11 | Safari iOS Full support 3.2 | Samsung Internet Android ? |
clear | Chrome Full support 4 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 8 | Opera Full support 10.5 | Safari Full support 4 | WebView Android Full support Yes | Chrome Android Full support 18 | Firefox Android Full support 6 | Opera Android Full support 11 | Safari iOS Full support 3.2 | Samsung Internet Android ? |
getItem | Chrome Full support 4 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 8 | Opera Full support 10.5 | Safari Full support 4 | WebView Android Full support Yes | Chrome Android Full support 18 | Firefox Android Full support 6 | Opera Android Full support 11 | Safari iOS Full support 3.2 | Samsung Internet Android ? |
key | Chrome Full support 4 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 8 | Opera Full support 10.5 | Safari Full support 4 | WebView Android Full support Yes | Chrome Android Full support 18 | Firefox Android Full support 6 | Opera Android Full support 11 | Safari iOS Full support 3.2 | Samsung Internet Android ? |
length | Chrome Full support 4 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 8 | Opera Full support 10.5 | Safari Full support 4 | WebView Android Full support Yes | Chrome Android Full support 18 | Firefox Android Full support 6 | Opera Android Full support 11 | Safari iOS Full support 3.2 | Samsung Internet Android ? |
removeItem | Chrome Full support 4 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 8 | Opera Full support 10.5 | Safari Full support 4 | WebView Android Full support Yes | Chrome Android Full support 18 | Firefox Android Full support 6 | Opera Android Full support 11 | Safari iOS Full support 3.2 | Samsung Internet Android ? |
setItem | Chrome Full support 4 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 8 | Opera Full support 10.5 | Safari Full support 4 | WebView Android Full support Yes | Chrome Android Full support 18 | Firefox Android Full support 6 | Opera Android Full support 11 | Safari iOS Full support 3.2 | Samsung Internet Android ? |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown