├── index.js
├── src
    ├── index.js
    └── store
    │   └── index.js
├── .gitignore
├── webpack.config.js
├── package.json
├── README.md
├── lib
    └── multi-tab-store.min.js
└── test
    └── index.html


/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Author: LJH
3 | * Date: 2019/7/19
4 | * Description:
5 | */
6 | import multiTabShareStore from './src'
7 | export default multiTabShareStore;
8 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import { Store } from './store'
2 | function initStore({ state = {} } = {}) {
3 |     const store = new Store({ state });
4 |     return store;
5 | }
6 | export default initStore;


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .lh/
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw*
23 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | 
 2 | module.exports = {
 3 |   mode: 'production',
 4 |   entry: {
 5 |     index: './index.js',
 6 |   },//打包入口文件名
 7 |   output: {
 8 |     path: __dirname + '/lib/',
 9 |     filename: 'multi-tab-store.min.js',
10 |     library: 'multiTabStore',
11 |     libraryExport: "default",
12 |     libraryTarget: "umd"
13 |   },
14 |   node: false,
15 | }
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "multi-tab-store",
 3 |   "version": "2.0.0",
 4 |   "repository": {
 5 |     "type": "git",
 6 |     "url": "git@github.com:JhonMr/memoryStorage.git"
 7 |   },
 8 |   "license": "MIT",
 9 |   "main": "index.js",
10 |   "scripts": {
11 |     "build": "webpack"
12 |   },
13 |   "devDependencies": {
14 |     "webpack-cli": "^4.10.0"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # multi-tab-store
 2 | 
 3 | 同域下多个标签页共享一套数据。
 4 | 
 5 | #### script 标签引入
 6 | 
 7 | ```
 8 | // 下载multi-tab-store.min.js并引入html
 9 | <script src="multi-tab-store.min.js"></script>
10 | ```
11 | 
12 | #### npm 引入
13 | 
14 | ```
15 | npm install multi-tab-store --save
16 | ```
17 | 
18 | #### 模块引用
19 | 
20 | ```
21 | import multiTabStore from 'multi-tab-store'
22 | const store = multiTabStore();
23 | 
24 | store.setItem('Auth', 'as00f0e058585856d'); //存入Auth
25 | const Auth = store.getItem('Auth');           //获取Auth
26 | ```
27 | 


--------------------------------------------------------------------------------
/lib/multi-tab-store.min.js:
--------------------------------------------------------------------------------
1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.multiTabStore=e():t.multiTabStore=e()}(self,(()=>(()=>{"use strict";var t={d:(e,s)=>{for(var i in s)t.o(s,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:s[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{default:()=>o});const s="_MULTI_STORE_EVENT_GET_STATE_",i="_MULTI_STORE_EVENT_SET_STATE_",n="_MULTI_STORE_EVENT_SET_";class a{constructor(t){return a._instance||(this.initSync=!1,this.initListener(),this.initState(t.state),a._instance=this),a._instance}initState(t){a.getState(),this.state=t}initListener(){window.addEventListener("storage",(t=>{const{newValue:e,key:o}=t;if(null!==e)if(o===s){console.log("被请求state");const t=this.getState();a.sendData(JSON.stringify(t),i)}else if(o===i){if(!this.initSync){this.initSync=!0;const t=JSON.parse(e);this.state=t}}else if(o===n){const{key:t,value:s}=JSON.parse(e);this.state[t]=s}}))}setItem(t,e){this.state[t]=e,a.sendData(JSON.stringify({key:t,value:e}))}getItem(t){return this.state[t]}getState(){return this.state}static sendData(t,e=n){window.localStorage.setItem(e,t),window.localStorage.removeItem(e)}static getState(){window.localStorage.setItem(s,Date.now()+""),window.localStorage.removeItem(s)}}const o=function({state:t={}}={}){return new a({state:t})};return e.default})()));


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Test</title>
 6 |   <style>
 7 |     form label {
 8 |       display: inline-block;
 9 |       width: 70px;
10 |     }
11 |     form input {
12 |       border: 1px solid #ccc;
13 |       border-radius: 3px;
14 |       outline-color: skyblue;
15 |     }
16 |   </style>
17 | </head>
18 | <body>
19 |   <form>
20 |     <label>key:</label>
21 |     <input name="key" />
22 |     <br><br>
23 |     <label>value:</label>
24 |     <input name="value" />
25 |   </form>
26 |   <br>
27 |   <button id="add">add</button>
28 |   <button id="remove">remove</button>
29 |   <button id="clear">remove</button>
30 |   <script src="../lib/multi-tab-store.min.js"></script>
31 |   <script>
32 |     var store = multiTabStore();
33 |     function getFormValue() {
34 |       var form = document.querySelector('form');
35 |       return {key: form.querySelector('[name="key"]').value, value: form.querySelector('[name="value"]').value};
36 |     }
37 |     document.querySelector('#add').addEventListener('click', function(){
38 |       var obj = getFormValue();
39 |       store.setItem(obj.key, obj.value);
40 |     }, false);
41 | 
42 |     document.querySelector('#remove').addEventListener('click', function(){
43 |       var obj = getFormValue();
44 |       store.removeItem(obj.key);
45 |     }, false);
46 | 
47 |     document.querySelector('#clear').addEventListener('click', function(){
48 |       store.clear();
49 |     }, false);
50 |   </script>
51 | </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | const COMMUNICATION_EVENT = '_MULTI_STORE_EVENT_';
 2 | const GET_STATE = COMMUNICATION_EVENT + 'GET_STATE_';
 3 | const SET_STATE = COMMUNICATION_EVENT + 'SET_STATE_';
 4 | const SET_EVENT = COMMUNICATION_EVENT + 'SET_';
 5 | export class Store {
 6 | 	constructor(options) {
 7 | 		if (!Store._instance) {
 8 | 			this.initSync = false;
 9 | 			this.initListener();
10 | 			// 初始化数据
11 | 			this.initState(options.state);
12 | 			Store._instance = this;
13 | 		}
14 | 		return Store._instance;
15 | 	}
16 | 	initState(state) {
17 | 		// console.log('发送同步数据请求')
18 | 		Store.getState();
19 | 		this.state = state;
20 | 	}
21 | 	initListener() {
22 | 		window.addEventListener('storage', (e) => {
23 | 			const { newValue, key } = e;
24 | 			//console.log(e)
25 | 			if (newValue === null) return;
26 | 			if (key === GET_STATE) {
27 | 				console.log('被请求state')
28 | 				const data = this.getState();
29 | 				Store.sendData(JSON.stringify(data), SET_STATE);
30 | 			}
31 | 			else if (key === SET_STATE) {
32 | 				//console.log('初始化state')
33 | 				if (!this.initSync) {
34 | 					this.initSync = true;
35 | 					const data = JSON.parse(newValue);
36 | 					this.state = data;
37 | 				}
38 | 			}
39 | 			else if (key === SET_EVENT) {
40 | 				const { key, value } = JSON.parse(newValue);
41 | 				// console.log('同步数据', key, value)
42 | 				this.state[key] = value;
43 | 			}
44 | 		})
45 | 	}
46 | 	setItem(key, value) {
47 | 		this.state[key] = value;
48 | 		Store.sendData(JSON.stringify({ key, value }));
49 | 	}
50 | 	getItem(key) {
51 | 		return this.state[key];
52 | 	}
53 | 
54 | 	getState() {
55 | 		return this.state;
56 | 	}
57 | 
58 | 	static sendData(data, eventName = SET_EVENT) {
59 | 		window.localStorage.setItem(eventName, data);
60 | 		window.localStorage.removeItem(eventName);
61 | 	}
62 | 
63 | 	static getState() {
64 | 		window.localStorage.setItem(GET_STATE, Date.now() + '');
65 | 		window.localStorage.removeItem(GET_STATE);
66 | 	}
67 | }


--------------------------------------------------------------------------------