1. Web APIs
当使用JavaScript进行Web开发的时候,有很多API是可以使用的,例如,
Console
Document
History
Location
Navigator
Storage
WebSocket
Worker
XMLHttpRequest
...
可以在这里Web APIs找到详细列表。
2. Web Storage API
Web Storage API,让浏览器可以存储键值对(key/value pairs),
它比起cookie方式,使用起来更方便。
Web Storage API主要提供了两种方式:sessionStorage
,localStorage
。
它们具有以下性质:
(1)sessionStorage
针对一个浏览器标签,分配存储区域。
新标签,新窗口,或者不同浏览器的标签,都会新建不同的存储区域。
(2)localStorage
针对每一种浏览器,每一个域名,分配一个存储区域。
同种浏览器,同一个域名,即使不同的标签,不同的实例窗口,也会共享同一个存储区域。
3. Interface
> sessionStorage
↓Storage {length: 0}
length: 0
↓__proto__: Storage
→clear: function clear()
→constructor: function Storage()
→getItem: function getItem()
→key: function key()
length: (...)
→removeItem: function removeItem()
→setItem: function setItem()
Symbol(Symbol.toStringTag): "Storage"
→get length: function ()
→__proto__: Object
在浏览器中输入sessionStorage
(localStorage
同理),可以看到,
sessionStorage
是Storage对象的实例,即,
> sessionStorage instanceof Storage
true
而Storage
对象,包含clear, getItem, key, removeItem, setItem
多种方法。
3.1 Properties
(1)length
返回Storage
实例中,所存储的键值对个数。
3.2 Methods
(1)key(n)
返回Storage
实例中,第n个键所对应的值。
(2)getItem(name)
返回Storage
实例中,与键名name
相对应的值。
(3)setItem(name, value)
将键值对name
/value
加入Storage
实例中,或者更新键名为name
的值。
(4)removeItem(name)
从Storage
实例中,删除键名为name
的键值对,返回undefined
。
(5)clear()
清空Storage
实例中的所有键值对。
4. Using the Web Storage API
sessionStorage
和localStorage
中保存的是键值对,
像普通的Object
对象一样,键和值,默认都是字符串,
如果不是字符串,就会进行自动转换。
我们除了可以使用setItem
和getItem
方法来进行键值对操作,
还可以像普通Object
对象一样,使用.
号进行操作。
例如,以下三种方式是等价的,
sessionStorage.a = 1;
sessionStorage['a'] = 1;
sessionStorage.setItem('a', 1); // 推荐
5. StorageEvent
window.addEventListener('storage', e=>{
this // -> window
});
以上我们为当前页面注册了一个StorageEvent
。
其中,e
包含如下这些常用属性,
key
newValue
oldValue
storageArea
url
(1)key
用来表示改变了的键名,
如果该值为null
,则表示此改变是由clear
方法触发的。
(2)newValue
针对某个键,所设置的新值。
如果该值为null
,则表示此改变是由clear
方法触发的,或者,
对应的键值对被删除了。
(3)oldValue
针对某个键,被修改之前的值。
如果该值为null
,则表示此改变是由clear
方法触发的,
(因为此时key
为null
不能标记具体的key
,所以oldValue
只能是null
)
或者,新增了一个曾经不存在的键。
(4)storageArea
被改变的那个Storage
对象。
(5)url
改变的Storage
对象所处的那个页面url。
注:
这里的null
不会造成歧义,
如果localStorage.setItem('a', null)
,
则会自动将值null
转为字符串"null"
。
另外值得注意的是,
(1)当前页面对Storage
进行改变,并不会触发这个事件,
(2)在注册之前,打开过的页面中,对Storage
进行改变也不会触发事件,
(3)其他标签页中的sessionStorage
改变,不会触发事件。
我们可以通过window.removeEventListener('storage', handler)
来删除事件监听器,
其中,handler
是必须要传入的。
参考
Web APIs
Web Storage API
Storage
Using the Web Storage API
StorageEvent