窗口控制內容
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 });