# sync-storage-listener

> 跨页同步存储监听解决方案/Synchronization listening scheme for cross page storage

Latest version **1.0.1** (published 2020-05-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install sync-storage-listener
pnpm add sync-storage-listener
yarn add sync-storage-listener
bun add sync-storage-listener
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2020-05-03 |
| First published | 2020-05-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 66.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 251528801@qq.com |
| Maintainers | sunyongfei |
| Keywords | sessionStorage, localStorage, cookie, crosspage |

## Links

- npm: https://www.npmjs.com/package/sync-storage-listener
- Repository: https://github.com/syfjackey/sync-storage-listener
- Homepage: https://github.com/syfjackey/sync-storage-listener#readme
- Issues: https://github.com/syfjackey/sync-storage-listener/issues
- npm.io page: https://npm.io/package/sync-storage-listener

## Alternatives

- [localforage](https://npm.io/package/localforage.md) — 6.2M weekly downloads
- [localforage-observable](https://npm.io/package/localforage-observable.md) — 30.8K weekly downloads
- [@y/y](https://npm.io/package/@y/y.md) — 30.1K weekly downloads
- [@metaobjectsdev/render](https://npm.io/package/@metaobjectsdev/render.md) — 3.5K weekly downloads
- [@ledgerhq/coin-algorand](https://npm.io/package/@ledgerhq/coin-algorand.md) — 1.1K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2020-05-03
- 1.0.0 — 2020-05-03

## README

# sync-storage-listener
### 跨页存储的同步监听方案 *Synchronization listening scheme for cross page storage*

### 它能解决什么？ *What can it solve？*


* 监听cookie/sessionStroage/localStorage变化
* 多页面同步监听变化
* Listen for Cookie / sessionsload / localstorage changes
* Multi page synchronous monitoring changes

### 例子 *example*
* 非同源页面sessionStorage无法共享
* 多页面操作，状态无法同步
* 无法监听cookie变化
* Session storage of non homologous pages cannot be shared
* Multi page operation, status cannot be synchronized
* Unable to listen for cookie changes

### 如何安装 *How to install*
    $ npm install sync-storage-listener
    
### 如何使用 *How to use*
    
    <script src="./dist/sync-storage-listener.min.js"></script>
    import Storage from 'sync-storage-listener'

    Storage.init(config)
    Storage.ready().then(() => {
      // to do something
    })
### 支持Vue
    import Storage from 'sync-storage-listener'
    Vue.use(Storage, config)
    this.$storage.ready().then(() => {
      // to do something
    })

### 配置 *config*


    {
       mountKey:string,//Vue挂载符,默认为：$storage
       enable:boolean,//是否开启跨页面同步监听
       prefix：string,//前缀符,默认为：cps
       storageType：'sessionStorage'，//还可设置为localStorage/cookie
       related:string|Array<string>,//指定同步数据 
       callback:function,//同步数据回调
       listener:object|Array<object>,//指定数据回调
       timeout:number //请求超时时长,默认为30ms 单位:ms
       refeshEmit:boolean,//同步后刷新页面是否触发一次监听
       filterInvalid:boolean,//是否过滤同样数据
    }


#### config.callback

    function(keys,vals,type,Storage){
      // keys:Array 
      // vals:Array 
      // tyep:request|set|remove
      // Storage:this 
    }
    
#### config.listener

    {
      key:string,
      callback:function
    }
    // 支持数组
    [{
      key:string,
      callback:function
    },{
      key:string,
      callback:function
    }]

#### config.listener.callback
    function(val,key,type,Storage){
      // key:string
      // val:string
      // tyep:request|set|remove
      // Storage:this 
    }

### 示例*example*
    //监听token变化
    {
       mountKey:'$storage',
       enable:true,
       prefix：'cps',
       storageType：'sessionStorage'，
       callback(keys){
         if(keys.includes('token')console.log('监听到了变化!')
       },
       listener:{
         key:'token',
         callback(){
           console.log('监听到了变化!')
         }
       }
    }
### Api
#### Storage.setItem()

    Storage.setItem(key:string,value:any,expire:number)
    Storage.setItem({key,value,expire})
    Storage.setItem([{key,value,expire},{key,value,expire}])
    // expire 过期时间,仅storageType为localStorage/cookie时有效 
    // 单位为：小时/hour

##### 示例*example*
    Storage.setItem('token',{userName:'jojo'},3)
    Storage.setItem({key:'token',value:{userName:'jojo'},expire:3})
    Storage.setItem([{key:'token',value:{userName:'jojo'},expire:3},{key:'some',value:{other:'nono'}}])
    
#### Storage.getItem()
    Storage.getItem(key:string):any
    Storage.getItem([key1,key2]):[val1,val2]

##### 示例*example*
    Storage.getItem('token') //return {userName:'jojo'}
    Storage.getItem(['token','some']) //return [{userName:'jojo'},{other:'nono'}]

#### Storage.removeItem()
    Storage.removeItem(key:string)
    Storage.removeItem([key1,key2])

##### 示例*example*
    Storage.removeItem('token')
    Storage.removeItem(['token','some'])

#### Storage.clear()
    Storage.clear()

#### Storage.ready()
    Storage.ready():Promise //同步完成 

##### 示例*example*
    Storage.ready().then(() => { // to do something })

---
_Source: https://npm.io/package/sync-storage-listener · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._