Web Storage

Web Storage API 提供机制， 使浏览器能以一种比使用Cookie更直观的方式存储键/值对。

概念

Web Storage 包含如下两种机制：

  • sessionStorage 为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。
  • localStorage 同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在。

通过 Window.sessionStorage 和 Window.localStorage 属性使用，调用其中任一对象会创建 Storage 对象，通过 Storage 对象，可以设置、获取和移除数据项。

对于每个源（origin）sessionStorage 和 localStorage 使用不同的 Storage 对象——独立运行和控制。

TIP

若用户禁用第三方cookie，那么将不允许来自第三方IFrames对Web Storage的访问。

使用Web Storage API

设置条目

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

测试Web Storage API可用性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 测试函数
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);
    }
}
1
2
3
4
5
6
7
// 使用测试函数
if (storageAvailable('localStorage')) {
  // Yippee! We can use localStorage awesomeness
}
else {
  // Too bad, no localStorage for us
}

测试本地存储是否已被填充

1
2
3
4
5
if(!localStorage.getItem('bgcolor')) {
  populateStorage();
} else {
  setStyles();
}

从存储中获取值

1
2
3
4
5
6
7
8
9
10
11
12
13
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);
}

在存储中设置值

1
2
3
4
5
6
7
function populateStorage() {
  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
  localStorage.setItem('font', document.getElementById('font').value);
  localStorage.setItem('image', document.getElementById('image').value);

  setStyles();
}

通过 StorageEvent 响应存储的变化

1
2
3
4
5
6
7
window.addEventListener('storage', function(e) {
  document.querySelector('.my-key').textContent = e.key;
  document.querySelector('.my-old').textContent = e.oldValue;
  document.querySelector('.my-new').textContent = e.newValue;
  document.querySelector('.my-url').textContent = e.url;
  document.querySelector('.my-storage').textContent = e.storageArea;
});

删除数据记录

  • Storage.removeItem() 接受一个参数——你想要移除的数据项的键，然后会将对应的数据项从域名对应的存储对象中移除。
  • Storage.clear() 不接受参数，只是简单地清空域名对应的整个存储对象。