crossStorage

具有跨域能力的localStorage。（需要浏览器支持 localStorage 和 postMessage）

API

• setItem(key, val)

  存。val可以是 Boolean、Number、String、Object

• getItem(key, callback)

  取。以获取到的val作为实参调用callback，val存的时候是什么类型的值，获取到的就是什么类型的值

• removeItem(key)

  删。

• clear()

  全删。

• change(callback)

  监听window.onstorage事件，setItem/removeItem/clear操作会触发storage事件，以{key, oldValue, newValue}作为实参调用callback。

  当removeItem时，newValue为null；当clear时，key, oldValue, newValue均为null。

Example

crossStorage.setItem('hero', 'annie')
crossStorage.getItem('hero', console.log)    // => 'annie'

/* page A */
crossStorage.setItem('annie', {sex: 0, age: 7, say: 'Did you see my bear?'})

setTimeout(function(){
    crossStorage.setItem('annie', {sex: 0, age: 8, say: 'Did you see my bear?'})
}, 365*24*60*60*1000)

/* page B */
crossStorage.change(function(e){
    if (e.key === 'annie') {
        if (e.newValue.age > e.oldValue.age) {
            console.log('Happy Birthday !')
        }
    }
})

原理

• 数据使用localStorage存储在代理页(www.huya.com/act/proxy/storage.html)
• 父页面通过iframe内嵌代理页，通过postMessage进行存取