关于web:Web-Storage-API的介绍和使用

简介

Web Storage 为浏览器提供了不便的 key value 存储，是一种比 cookie 更加不便简洁的存储形式。也是诸多客户端存储形式中十分常见的一种。

一起来看看吧。

浏览器的本地存储技术

除了最早的应用 cookie 来进行本地存储之外，古代浏览器应用 Web Storage API 来不便的进行 key/value 的存储。

Web Storage 有两种存储形式：

1. sessionStorage: 对于每一个拜访源，都会维持一个独立的存储区域。只有浏览器不敞开，这些数据都不会隐没。

所以这种存储叫做 session 存储。

留神，这里的 session 和服务器端的 session 的意思是不一样的，这里的 sessionStorage 只是本地的存储，并不会将数据传输到服务器端。

sessionStorage 的存储容量要比 cookie 大得多，能够达到 5MB。

1. localStorage：和 sessionStorage 相似，也是用来做数据存储的，不同的是 localStorage 存储的数据不会随着浏览器的敞开而隐没。

我能够通过设置过期工夫，应用 javascript 手动删除或者分明浏览器缓存来革除 localStorage。

这两种存储形式是通过 Window.sessionStorage 和 Window.localStorage 来应用的。事实上咱们看下 Window 的定义：

interface Window extends EventTarget, AnimationFrameProvider, GlobalEventHandlers, WindowEventHandlers, WindowLocalStorage, WindowOrWorkerGlobalScope, WindowSessionStorage 

Window 继承了 WindowLocalStorage 和 WindowSessionStorage，所以咱们能够间接从 Window 来获取 sessionStorage 和 localStorage。

对于每一个 origin 源来说，Window.sessionStorage 和 Window.localStorage 都会创立一个新的 Storage 对象，用来进行数据的读取。

Web Storage 相干接口

和 web storage 相干的接口有三个。第一就是刚刚讲到的 window。咱们能够通过 window 获取 sessionStorage 和 localStorage。

第二个就是 Storage 对象，获取到的两个 Storage 都是 Storage 对象。

interface Storage {

    readonly length: number;

    clear(): void;

    getItem(key: string): string | null;

    key(index: number): string | null;

    removeItem(key: string): void;

    setItem(key: string, value: string): void;
    [name: string]: any;
}

咱们能够看到 Storage 对象为咱们提供了很多有用的办法，对数据进行存取。

第三个就是 StorageEvent，当 storage 发现变动的时候就会触发 StorageEvent 事件。

浏览器兼容性

咱们用两张图来看一下这两个 storage 在不同浏览器的兼容性：

Window.localStorage:

Window.sessionStorage:

能够看到，古代浏览器基本上都是反对这两种 storage 个性的。

如果咱们应用的是老式的浏览器，比方 Internet Explorer 6，7 或者其余没有列出的浏览器，咱们就须要进行检测，判断 Storage 是否被浏览器无效的反对。

咱们看下怎么做检测：

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);
    }
}

其中的 type 就是 localStorage 或者 sessionStorage，咱们通过捕捉异样来判断是否存在无效的 Storge 对象。

看下咱们怎么应用：

if (storageAvailable('localStorage')) {// Yippee! We can use localStorage awesomeness}
else {// Too bad, no localStorage for us}

隐身模式

大多数古代浏览器都反对一种隐身模式，在这种模式下，将不会存储浏览历史记录和 Cookie 等数据隐衷选项。

所以这和 Web Storage 是不兼容的。那么怎么解决这个问题呢？

不同的浏览器可能采纳不同的解决办法。

比方 Safari 中，隐身模式下 Web Storage 尽管是可用的，然而不会存储任何货色。

也有些浏览器会抉择在浏览器敞开的时候清空之前的所有存储。

所以，咱们在开发的过程中，肯定要留神不同浏览器的不同解决形式。

应用 Web Storage API

对于 Storage 对象，咱们能够像一般对象一样间接拜访对象中的属性，也能够应用 Storage.getItem() 和 Storage.setItem() 来拜访和设置属性。

留神 Storage 对象中的 key value 都是 string 类型的，即便你输出的是 integer，也会被转换成为 String。

上面的例子，都能够设置一个 colorSetting 属性：

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

尽管三种形式都能够实现存取的性能，然而咱们举荐应用 Web Storage API：setItem, getItem, removeItem, key, length 等。

除了对 Storage 中的值进行设置之外，咱们还能够触发和监听 StorageEvent。

先看一下 StorageEvent 的定义：

interface StorageEvent extends Event {

    readonly key: string | null;

    readonly newValue: string | null;

    readonly oldValue: string | null;

    readonly storageArea: Storage | null;

    readonly url: string;
}

每当 Storage 对象发送变动的时候，就出触发 StorageEvent 事件。

留神，如果是 sessionStorage 的变动，则不会被触发。

如果一个 domain 中的某个页面产生了 Storage 的变动，那么这个 domain 的其余页面都会监听到这个变动。当然，如果是其余 domain 的话，是监听不到这个 StorageEvent 的。

咱们能够通过 window 的 addEventListener 办法，来增加 storage 事件，如下所示：

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 = JSON.stringify(e.storageArea);
});

下面的例子中，咱们从 StorageEvent 中获取了 key，oldValue，newValue，url 和 Storage 对象。

总结

下面就是 Web Storage 和其 API 的根本应用。

本文作者：flydean 程序那些事

本文链接：http://www.flydean.com/web-storage-api/

本文起源：flydean 的博客

欢送关注我的公众号:「程序那些事」最艰深的解读，最粗浅的干货，最简洁的教程，泛滥你不晓得的小技巧等你来发现！