版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
窗口控制内容
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===null
// <true
// >sessionStorage.getItem(2)
// <null
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 });