窗口控制內容

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)// <nullif (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 });

總結

以上是生活随笔為你收集整理的浏览器窗口控制---使用localStorage的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。