Window control content
1, part of the window opening can not be repeated, if already open, the window should automatically locate.
2, exit the system, if there are other pictures of the system open, give information, and may be close together.
3, part of the input window are not allowed by the url.
4, statistical data, dwell time window, open time, access frequency.
Use localStorage
1, NA cookie, mainly: different windows cookie directly out of sync, localStorage synchronization.
secondary:
Size Limit: Cookie size of not more than 4KB (LocalStorage between 2.5MB to 10MB)
Waste of bandwidth: Each request will be sent back to the server
2, NA IndexedDB
Main: cleaning up the browser cache when, indexedDB is not clear, is not convenient to use. (Assuming that because the code error, the record has been to open the editor, not actually open, causing the user can not open, the fastest user to solve this problem for users, clearing the browser cache than finding indexedDB to delete more convenient.)
Secondary: IndexedDB structure for storing a greater amount of design data.
Advantages: IndexedDB asynchronous operation can be prevented from blocking a user operation. Retrieving provide higher efficiency, in particular in the case of large volumes of data.
LocalStorage Code
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;
}
}
localStorage and Packaging realize class 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 });