浏览器窗口控制---使用localStorage

窗口控制内容

1, 部分窗口不能重复打开，如果已经打开，应该自动定位到该窗口。

2，退出系统，如果有本系统的其他画面打开，给予提醒，并且可以一起关闭。

3，部分窗口不允许通过输入url进入。

4，统计数据，窗口停留时间，打开时间，访问频率。

使用localStorage

1, 不适用cookie，主要：不同窗口直接cookie不同步，localStorage同步。

次要：

大小限制：Cookie 的大小不超过4KB（LocalStorage 在 2.5MB 到 10MB 之间）

浪费带宽：每次请求都会发送回服务器

2， 不适用IndexedDB

主要：浏览器清理缓存的时候，indexedDB是不清除的，不方便用户使用。（假设由于代码错误，记录了已经打开编辑器，实际没有打开，导致用户不能打开，用户要最快的解决这个问题，对用户来说，清理浏览器缓存比找到indexedDB去删除更加方便。）

次要：IndexedDB针对存储更大量的结构化数据设计的。

优点：IndexedDB异步操作可以防止阻塞用户操作。提供更高的检索效率，特别是数据量大的情况下。

LocalStorage代码

 const LocalStorage = {

    /**

    * 取得指定数据

    * @param {String} name 存储的key

    * @param {String} type 返回数据的类型：string，json，array，object，number

    * @returns {any} 返回查询数据，类型由参数type指定

    */

    getStore({ name, type = 'string' }) {

        if (!name) {

            throw new Error('参数错误');

        }

        let content = localStorage.getItem(name);

        // 验算过程

        // >localStorage.getItem(2)

        // 

        // >null===null

        // 

        // >sessionStorage.getItem(2)

        // 

        if (content === null) {

            // 函数尽量不返回null，避免报错

            return '';

        }

        type = type.toLowerCase();

        if (type == 'string') {

            return content;

        } else if (type == 'json' || type == 'array' || type == 'object') {

            return JSON.parse(content)

        } else if (type == 'number') {

            return parseFloat(content)

        }

    },

    /**

    * 存储指定数据。注意：【改】是重新赋值和增的用法一致

    * @param {String} name 存储的key

    * @param {String} content 存储的值：string，json，array，object，number

    * @returns {void}

    */

    setStore({ name, content }) {

        // 注意：【改】是重新赋值和增的用法一致

        if (!name) {

            throw new Error('参数错误');

        }

        if (typeof content != 'string') {

            content = JSON.stringify(content);

        }

        localStorage.setItem(name, content)

    },

    /**

    * 删除指定数据。

    * @param {String} name 存储的key

    * @returns {void}

    */

    removeStore(name) {

        if (!name) {

            throw new Error('参数错误');

        }

        localStorage.removeItem(name)

    },

    /**

    * 批量删除指定数据。

    * @param {array} keys 存储的key

    * @returns {void}

    */

    removeStoreList(keys) {

        if (!Array.isArray(keys)) {

            throw new Error('参数错误');

        }

        keys.forEach(name=>{

            localStorage.removeItem(name)

        })



    },

    /**

    * 检查key是不是存在。

    * @param {String} name 要检查的key

    * @returns {boolean}

    */

    keyCheckIn(name) {

        if (!name) {

            throw new Error('参数错误');

        }

        return localStorage.getItem(name)===null ? false : true;

    }

}

class实现localStorage与sessionStorage封装

// class实现localStorage与sessionStorage封装
/**
 * vue-resource 封装window的方法
 * @module utils/xhWindow
 * @author 王一名
 */
// import xh_utils from './utils'

export class StorageService {
    constructor(storage) {
        console.log('StorageService');
        this.storage = storage;
    }
    /**
         * 取得指定数据
         * @param {String} name 存储的key
         * @param {String} type 返回数据的类型：string，json，array，object，number
         * @returns {any} 返回查询数据，类型由参数type指定
         */
    getStore({ name, type = 'string' }) {
        if (!name) {
            throw new Error('参数错误');
        }
        let content = this.storage.getItem(name);
        if (content === null) {
            // 函数尽量不返回null，避免报错
            return '';
        }
        type = type.toLowerCase();
        if (type == 'string') {
            return content;
        } else if (type == 'json' || type == 'array' || type == 'object') {
            return JSON.parse(content)
        } else if (type == 'number') {
            return parseFloat(content)
        }
    }
    /**
 * 存储指定数据。注意：【改】是重新赋值和增的用法一致
 * @param {String} name 存储的key
 * @param {String} content 存储的值：string，json，array，object，number
 * @returns {void}
 */
    setStore({ name, content }) {
        // 注意：【改】是重新赋值和增的用法一致
        if (!name) {
            throw new Error('参数错误');
        }
        if (typeof content != 'string') {
            content = JSON.stringify(content);
        }
        this.storage.setItem(name, content)
    }
    /**
     * 删除指定数据。
     * @param {String} name 存储的key
     * @returns {void}
     */
    removeStore(name) {
        if (!name) {
            throw new Error('参数错误');
        }
        this.storage.removeItem(name)
    }
    /**
     * 批量删除指定数据。
     * @param {array} keys 存储的key
     * @returns {void}
     */
    removeStoreList(keys) {
        if (!Array.isArray(keys)) {
            throw new Error('参数错误');
        }
        keys.forEach(name => {
            this.storage.removeItem(name)
        })
    }
    /**
     * 检查key是不是存在。
     * @param {String} name 要检查的key
     * @returns {boolean} true : 有返回值
     */
    keyCheckIn(name) {
        if (!name) {
            throw new Error('参数错误');
        }
        return this.storage.getItem(name) === null ? false : true;
    }
    clear() {
        return this.storage.clear();
    }
}

export class LocalStorageService extends StorageService {
    constructor() {
        console.log('localStorage');
        super(localStorage);
    }
}

export class SessionStorageService extends StorageService {
    constructor() {
        console.log('sessionStorage');
        super(sessionStorage);
    }
}

const localStorageService = new LocalStorageService();
const sessionStorageService = new SessionStorageService();

export default {
    localStorageService: localStorageService,
    sessionStorageService: sessionStorageService
}


// Vue使用方式
import xh_window from '../common/utils/xhWindow';

Object.defineProperty(Vue.prototype, 'xh_window', { value: xh_window });