浏览器窗口控制---使用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===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相关推荐
- 【Selenium】控制当前已经打开的 chrome浏览器窗口
前言 有过几个小伙伴问过我如何利用 Selenium 获取已经打开的浏览器窗口,这里给安排了,还安排了两篇. 标题 链接 [Selenium]控制当前已经打开的 chrome浏览器窗口 https:/ ...
- js控制浏览器窗口弹出、警告框、确认框
描述 js控制浏览器窗口弹出.警告框.确认框 代码 function fun1(){alert("喜欢我"); }function fun2(){var bo = confirm( ...
- 【Selenium】控制当前已经打开的 chrome浏览器窗口(高级版)
前言 利用 Selenium 获取已经打开的浏览器窗口,全python操作 标题 链接 [Selenium]控制当前已经打开的 chrome浏览器窗口 https://blog.csdn.net/we ...
- chrome 窗体高度_控制Chrome浏览器窗口最小宽度和高度
控制 Chrome 浏览器窗口最小宽度和高度 (原创) 最近通过 Chrome 浏览器做 UI , Golang 作为主体语言的方式做了一个本地信息搜索的小工具, 核心的两个表列是捆绑对齐的,但在浏览 ...
- 02-selenium的进一步学习(控制浏览器窗口+)
1.控制浏览器窗口 WebDriver 提供的 set_window_size()方法可以用来设置浏览器窗口大小. """ * name → find_element_b ...
- 关闭浏览器窗口的时候,如何清空localStorage的数据
关闭浏览器窗口的时候,如何清空localStorage的数据 一.对于单页面应用,例如vue等 二.对于多页面应用 1.第一种方案(对于vue) 2.第二种方案(对于原生js) 一.对于单页面应用,例 ...
- Javascript学习7 - 脚本化浏览器窗口
原文:Javascript学习7 - 脚本化浏览器窗口 本节讨论了文档对象模型.客户端Javascript下Window中的各项属性,包括计时器.Location对象.Histroy对象.窗口.浏览器 ...
- java selenium常用API(WebElement、iFrame、select、alert、浏览器窗口、事件、js) 一
WebElement相关方法 1.点击操作 WebElement button = driver.findElement(By.id("login")); button.clic ...
- VB对IE浏览器完全控制
VB对IE浏览器完全控制 2010年02月18日 IE浏览器完全控制 ,相信现在绝大多数计算机上使用的是IE浏览器.如何通过编程控制IE的操作呢,本文将一步步介绍如何通过VB 调用IE的对象库来对IE ...
最新文章
- php v5.,PHP V5.3 中的新特性,第 5 部分- 从 PHP V5.2 升级到 PHP V5.3
- ERP的风险及其预防
- Python学习笔记:常用内建模块7XML
- Linux 命令详解(二)awk 命令
- ios键盘done中文_IOS_IOS关闭键盘的方法,首先输入完成后按键盘上的done - phpStudy...
- LeetCode-145:二叉树的后序遍历
- WebStorm连接Github教程
- LAMP集群项目五 nfs存储的数据实时同步到backupserver
- 设计模式之——观察者模式
- 宽带连接不上,拨号宽带连接的创建。
- 实现异步加载js文件及加载完成后回调
- SLAM_kitti数据集求相机cam2到IMU的变换矩阵
- c#对Aspose.Word替换书签内容的简单封装
- [数学建模]马尔萨斯的人口模型及感性认识
- StreamNative 联合创始人翟佳出席QCon北京峰会并发表演讲
- 大数据开发必备面试题Hive篇
- (三)Redis——实现主从复制
- Linux USB摄像头使用
- 子墨庖丁Android的ActionBar源代码分析 (一)实例化
- 接口自动化测试框架搭建:基于python+requests+pytest+allure实现