文章目录

简介
浏览器的本地存储技术
Web Storage相关接口
浏览器兼容性
隐身模式
使用Web Storage API
总结

简介

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 Firefoxe.code === 22 ||// Firefoxe.code === 1014 ||// test name field too, because code might not be present// everything except Firefoxe.name === 'QuotaExceededError' ||// Firefoxe.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的博客

欢迎关注我的公众号:「程序那些事」最通俗的解读，最深刻的干货，最简洁的教程，众多你不知道的小技巧等你来发现！

Web Storage API的介绍和使用相关推荐

HTML5 Web Storage API
Web Storage API Web Storage 是以键值对(key-value)的形式存储数据,要存储的数据需要一个名字作为键,然后就可以使用这个键来读取它的值.键是一个字符串.值可以是 Ja ...
HTML5 基础知识，第 3 部分 HTML5 API 之应用-介绍HTML5 API 的用法和价值，Canvas 提供的创造性，以及Web storage的离线应用
HTML5 集设计者和开发者于一身,其主要任务就是构建高效的丰富 Internet 应用程序之富网络应用 (Rich Internet Application,简称RIA),尤其是富 UI(User ...
使用 jQuery Mobile 与 HTML5 开发 Web App (十六) —— HTML5 Web Storage
绝大多数的软件都需要使用某种具有持久性的方式来存储数据,Web Apps 也不例外,涉及到完整后台的 Web Apps ,可以直接在后台使用 mysql 等数据库来存储数据,但过多的 sql 查询会影 ...
HTML5 本地存储 Web Storage
Web Storage Web Storage 是一项非常重要,并且很实用的技术,已经被大多数浏览器(包括IE8)所支持, 在HTML4时代, 虽然cookie无处不在,但cookie仍然有自己的硬伤 ...
HTML5 Web Storage事件
Storage事件在某些复杂情况下,如果多个页面都需要访问本地存储的数据,就需要在存储区域的内容发生改变时,能够通知相关的页面. Web Storage API内建了一套事件通知机制,当存储区域的内 ...
HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)...
1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是coo ...
（五）HTML5本地存储——Web Storage
Web应用的发展,使得客户端存储使用得也越来越多,而实现客户端存储的方式则是多种多样.最简单而且兼容性最佳的方案是Cookie,但是作为真正的客户端存储,Cookie则存在很多致命伤.此外,在IE6及 ...
HTML5 高级系列：web Storage
HTML5 高级系列:web Storage html5 浏览数:172 2017-10-23 前言 HTML5 的 web Storage 存储方式有两种:localStorage 和 sessio ...
Web Storage 与cookies
Web Storage介绍 Web Storage带来的好处减少网络流量:一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器间不必要地来回传递.快 ...

Web Storage API的介绍和使用