当前位置: 首页 > news >正文

【VUE】localStorage、indexedDB跨域数据操作实战笔记

由于业务需求,最近研究localStorage、indexedDB等如何跨域进行CRUD管理,经过一番研究,封装了如下代码并做个笔记

环境

  • vue: ^3.3.4

实战

发送端(即触发站点)

App.vue中引入CrossDomainStorage组件(后面有实现过程)

<script setup>
import { ref } from 'vue'
import CrossDomainStorage from "@/components/CrossDomainStorage/index.vue";
const crossDomainStorageRef = ref(null)function sendTest() {if (crossDomainStorageRef.value){crossDomainStorageRef.value.sendMessage("getItem", {key:'APP_THEME_SCREEN'})}
}
</script><template><div><button @click="sendTest">测试</button><CrossDomainStorage :src="'http://xxxx.xxx/'" ref="crossDomainStorageRef"/></div>
</template>

接收端(即目标站点)

为了方便直接在App.vue中实践

<script setup>
import ParentMsgListener from '@/utils/parentMsgListener'const parentMsgListener = new ParentMsgListener()
parentMsgListener.addPermissionModule({ // 设置权限key对应处理方法localStorage: {setItem: localStorage.setItem,getItem: localStorage.getItem,},asyncTest: {text: async ()=> await 'asyncValue',text2: () => 'testValue',}
});
parentMsgListener.addPermission([ // 设置可操作的对象列表'localStorage'
])
parentMsgListener.start();
</script>

实现代码

CrossDomainStorage组件

<script setup lang="ts">
import {ref, reactive, onMounted} from 'vue';defineOptions({name: 'CrossDomainStorage'
});const iframeRef = ref();
const emit = defineEmits(['onLoad','response'])
const props = defineProps({src: {type: String, default:()=>"", required:true}
});
const status = ref(false)
const iframeStyles = reactive({position: 'fixed',top:0,left:0,width: 0,height: 0,zIndex:-1
});window.addEventListener('message', function (e) {if (e.data && e.data.request){console.log('[发送端]从iframe获取数据', e.data)emit('response', e.data||null)}
});function sendMessage(method: string, param: object, key: string) {if (status.value===false)return;key = key?key:'localStorage'if (iframeRef?.value){const iframeNode = iframeRef.value.contentWindow;let request = {key, method, param}console.log('[发送端]向iframe发送request:', request)setTimeout(function () {iframeNode.postMessage(request, '*')}, 500)}
}defineExpose({sendMessage: (method: string, param: object, key: string)=>sendMessage(method, param, key)
})onMounted(()=>{if (!!iframeRef.value && !!iframeRef.value.contentWindow){iframeRef.value.onload = function () {status.value = true;emit('onLoad', true)}}
})
</script><template><iframe ref="iframeRef" :src="props.src":style="iframeStyles"frameborder="0"scrolling="no"/>
</template>

parentMsgListener.ts封装消息管理类

// src/utils/parentMsgListener.ts
const messageLog = function (log, ...arg){arg.unshift(`[接收端]`, log)console.log.apply(console, arg)
}interface permissionOptions {key: string[],module: object
}/*** 监听响应拦截** @param {object}   e          接收数据* @param {array}   permission 权限列表* @param {function} response   接收回调** @return {void}*/
const listenerResponse = async function (e, permission: permissionOptions, response) {if (e.data && !!e.data.key && permission.key.includes(e.data.key)){let result = undefined;let lib = permission.module[e.data.key] || undefined;let method = e.data?.method || '';let param  = e.data?.param||{};if (!!lib){let _param = [];for (let key in param){_param.push(`'${param[key]}'`)}try { // 调用非js内置方法且兼容异步调用处理方法result = await ((lib[method]).apply(lib[method], Object.values(param)));}catch (error) { // 调用js内置方法result = eval(`${e.data.key}.${method}(${_param.join(',')})`);}}messageLog('response:', result)response({request: e.data,response: result}, '*')}
}class ParentMsgListener {/*** 消息调用权限对应处理* @var {object}*/private permissionMap = {};/*** 消息允许调用权限* @var {string[]}*/private permission = []constructor(permission) {if (permission && permission.length>0){this.addPermission(permission)}}/*** 添加授权权限key对应处理模块** @param {string|object} name 权限key* @param {function} fn 权限key处理方法** @return this*/addPermissionModule(name:string|object, fn){if (!fn && typeof name === 'object'){ // 批量导入for (let moduleKey in name){this.addPermissionModule.call(this, moduleKey, name[moduleKey]);}}else if(typeof name === 'string' && !!fn) { // 逐个导入this.permissionMap[name] = fn;}return this;}/*** 添加授权权限** @param {string|string[]} permissionKey 权限key** @return this*/addPermission(permissionKey: string|string[]){if (permissionKey instanceof Array){let that = this;permissionKey.forEach((key)=>{that.permission.push(key)})}else{this.permission.push(permissionKey)}return this;}/*** 发送消息** @param {object} message      发送内容* @param {string} targetOrigin 默认:*** @return {void}*/sendMessage(message:any, targetOrigin:string = '*'){messageLog('发送消息', message)window.parent.postMessage(message, targetOrigin)}/*** 启动监听*/start(){window.addEventListener('message',(e)=>listenerResponse(e, {key: this.permission,module: this.permissionMap}, this.sendMessage))}
}export default ParentMsgListener

相关文章:

【VUE】localStorage、indexedDB跨域数据操作实战笔记

由于业务需求&#xff0c;最近研究localStorage、indexedDB等如何跨域进行CRUD管理&#xff0c;经过一番研究&#xff0c;封装了如下代码并做个笔记 环境 vue: ^3.3.4 实战 发送端(即触发站点) 在App.vue中引入CrossDomainStorage组件(后面有实现过程) <script setup&g…...

四、web应用程序技术——HTTP

文章目录 1 HTTP请求2 HTTP响应3 HTTP方法4 URL5 HTTP消息头5.1 常用消息头5.2 请求消息头5.3 响应消息头 6 cookie7 状态码8 HTTP代理9 HTTP身份验证 HTTP&#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff09;是访问万维网使用的核心通信协议&…...

B2B2C小程序商城系统--跨境电商后台数据采集功能开发

搭建一个B2B2C小程序商城系统涉及到多个步骤和功能开发&#xff0c;其中包括跨境电商后台数据采集功能的开发。具体搭建步骤如下&#xff1a; 一、系统搭建 1. 确定需求和功能&#xff1a;根据B2B2C商城的需求&#xff0c;确定系统的功能和模块&#xff0c;包括商品管理、订单…...

Python-OpenCV中的图像处理-形态学转换

Python-OpenCV中的图像处理-形态学转换 形态学转换腐蚀膨胀开运算闭运算形态学梯度礼帽黑帽形态学操作之间的关系 形态学代码例程 形态学转换 形态学操作:腐蚀&#xff0c;膨胀&#xff0c;开运算&#xff0c;闭运算&#xff0c;形态学梯度&#xff0c;礼帽&#xff0c;黑帽等…...

理解 Python 的 for 循环

前言 嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 在本篇博客中&#xff0c;我们将讨论 Python 中 for 循环的原理。 我们将从一组基本例子和它的语法开始&#xff0c;还将讨论与 for 循环关联的 else 代码块的用处。 然后我们将介绍迭代对象、迭代器和迭代器协议&…...

携程验证码

今日话题&#xff1a;凑字数水文章。大表哥们感兴趣可以看看。 携程验证类型总共有3种。无感&#xff0c;滑块&#xff0c;点选。 process_type&#xff1a;None为无感 验证接口&#xff1a;https://ic.ctrip.com/captcha/v4/risk_inspect process_type&#xff1a;JIGSAW为…...

资深媒体人宋繁银加入《数据猿》任总编辑,全面负责公司整体内容工作

大数据产业创新服务媒体 ——聚焦数据 改变商业 2023年7月北京&#xff0c;《数据猿》宣布正式任命宋繁银为总编辑&#xff0c;全面负责公司整体内容工作。此次重要的人事任命标志着《数据猿》的发展迈上了一个新的台阶&#xff0c;对于《数据猿》团队而言&#xff0c;不仅是一…...

【Unity实战100例】人物状态栏UI数据刷新—MVC观察者模式

目录 一.创建Model层数据模型 二.创建View层关联UI组件 三.创建Controller层使得V和M数据关联 源码:htt...

8路AD采集FMC子卡【产品资料】

FMC148是一款基于VITA57.4标准的JESD204B接口FMC子卡模块&#xff0c;该模块可以实现8路14-bit、500MSPS/1GSPS/1.25GSPS ADC采集功能。该板卡ADC器件采用ADI公司的AD9680芯片,全功率-3dB模拟输入带宽可达2GHz。该ADC与FPGA的主机接口通过16通道的高速串行GTX收发器进行互联。 …...

文章三:团队协作实践 - 协作高手:Git团队开发最佳实践

开始本篇文章之前先推荐一个好用的学习工具&#xff0c;AIRIght&#xff0c;借助于AI助手工具&#xff0c;学习事半功倍。欢迎访问&#xff1a;http://airight.fun 概述 在现代软件开发中&#xff0c;团队协作是必不可少的环节。而Git作为目前最受欢迎的分布式版本控制系统&a…...

Pyinstaller 打包 django 项目如何将命令行参数加入?

起因 Pyinstaller 打包 django 项目&#xff0c;打包成 manage.exe 后用命令行 cmd manage.exe 0.0.0.0:8001 --noreload 感觉很不方便。 希望能够直接把命令行参数也打包进去。 我是这样做的&#xff1a; 步骤 1.新建 main.py 文件 import osos.system(manage.exe runser…...

hive锁的管理器的介绍

各个管理器的使用&#xff1a; org.apache.hadoop.hive.gl.lockmgr.DbTxnManager 在 Hive 中被用于实现事务和锁的管理机制。它的使用场景通常涉及以下情况&#xff1a; ACID事务支持&#xff1a;当需要在 Hive 中进行复杂的数据操作&#xff0c;并确保这些操作以原子性、一致…...

以太网TCP协议(十二)

目录 一、概述 二、功能 2.1 连接管理 2.2 响应与序列号 2.3 超时重发 2.4 传输单位&#xff1a;段 2.5 窗口控制 2.6 流控制 2.7 拥塞控制 2.8 效率提高 三、报文格式 一、概述 TCP作为一种面向有连接的协议&#xff0c;只有在确认通信对端存在时才会发送数据&…...

ARM 架构下的汇编指令(持续更新中)

ARM 架构下的汇编指令 1. 预取指令1.1. pldw1.2. pld1.3. 使用场景 2. ldrex3. teq4. 条件分支指令4.1. beq4.2. bne 1. 预取指令 1.1. pldw pldw 是 “Prefetch Load Data for Write” 的缩写&#xff0c;pldw 指令用于预取写操作&#xff0c;它告诉处理器需要预先加载指定地…...

11款UML/SysML建模工具更新(2023.7)Papyrus、UModel……

DDD领域驱动设计批评文集 欢迎加入“软件方法建模师”群 《软件方法》各章合集 最近一段时间更新的工具有&#xff1a; 工具最新版本&#xff1a;drawio-desktop 21.6.5 更新时间&#xff1a;2023年7月22日 工具简介 开源绘图工具&#xff0c;用Electron编写&#xff0c;…...

FPGA外部触发信号毛刺产生及滤波

1、背景 最近在某个项目中&#xff0c;遇到输入给FPGA管脚的外部触发信号因为有毛刺产生&#xff0c;导致FPGA接收到的外部触发信号数量多于实际值。比如&#xff1a;用某个信号源产生1000个外部触发信号&#xff08;上升沿触发方式&#xff09;给到FPGA输入IO&#xff0c;实际…...

day38 滑动窗口

1. 滑动窗口 应用场景&#xff1a; 满足xxx条件&#xff08;计算结果、出现次数、同时包含&#xff09; 关键词&#xff1a;最长最短子串无重复等等 1&#xff09;最长 左右指针在起始点&#xff0c;R 向右依次滑动循环&#xff1b; 如果&#xff1a; 窗内元素满足条件&#x…...

翻出了我当时学习的笔记来了html

php&#xff1a;高级语言 web应用程序 万维网 浏览器中查看 apache&#xff1a;服务器 mysql&#xff1a;数据库 html 标签 css&#xff1a;层叠样式表 javascript&#xff1a;客户端脚本 js jquery mysql数据库基础 php语法基础 面向对象&#xff08;物件&#xff09; smar…...

vuejs 设计与实现 - 快速diff算法

Vue.js 2 所采用的双端 Diff 算法。既然快速 Diff 算法如此高效&#xff0c;我们有必要了解它的思路。接下来&#xff0c;我们就着重讨论快速 Diff 算法的实现原理。 相同的前置元素和后置元素 快速 Diff 算法借鉴了纯文本 Diff 算法中预处理的步骤。 案例&#xff1a; 旧的…...

webpack基础知识七:说说webpack proxy工作原理?为什么能解决跨域?

一、是什么 webpack proxy&#xff0c;即webpack提供的代理服务 基本行为就是接收客户端发送的请求后转发给其他服务器 其目的是为了便于开发者在开发模式下解决跨域问题&#xff08;浏览器安全策略限制&#xff09; 想要实现代理首先需要一个中间服务器&#xff0c;webpac…...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

mac:大模型系列测试

0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何&#xff0c;是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试&#xff0c;是可以跑通文章里面的代码。训练速度也是很快的。 注意…...