简介
Web Storage为浏览器提供了不便的key value存储，是一种比cookie更加不便简洁的存储形式。也是诸多客户端存储形式中十分常见的一种。
一起来看看吧。
浏览器的本地存储技术
除了最早的应用cookie来进行本地存储之外，古代浏览器应用Web Storage API来不便的进行key/value的存储。
Web Storage有两种存储形式：
- sessionStorage: 对于每一个拜访源，都会维持一个独立的存储区域。只有浏览器不敞开，这些数据都不会隐没。
所以这种存储叫做session存储。
留神，这里的session和服务器端的session的意思是不一样的，这里的sessionStorage只是本地的存储，并不会将数据传输到服务器端。
sessionStorage的存储容量要比cookie大得多，能够达到5MB。
- 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的博客
欢送关注我的公众号:「程序那些事」最艰深的解读，最粗浅的干货，最简洁的教程，泛滥你不晓得的小技巧等你来发现！
发表回复