活字格V9 嵌入的html与活字格页面数据交互

不想看分析请直接跳到解决方案

项目场景:

活字格V9 嵌入的html与活字格页面的数据交互(传值),嵌入的html用了WebSocket来控制硬件,获取的数据无法回传到活字格页面上,且嵌入的html无法使用活字格内置的js及其变量Forguncy来访问数据库。


问题描述

简单来说,就是html页面间的传值问题。


问题分析:

第一时间居然去找活字格的插件,太不专业了。

然后突然想到session和cookie可以保存在浏览器内部存储器中,于是去看了b站DOM视频

最后选出了一个非常简单的办法用Local Storage

Local Storage概念

Local Storage与Session Storage的唯一一点区别就是Local Storage属于永久性存储,而Session Storage属于当会话结束的时候, localStorage只要在相同的协议、相同的主机名、相同的端口下,就能读取/修改到同一份localStorage数据 


解决方案:

解决方法:

localStorage.setItem('key', value);//存值

var value = localStorage.getItem('key');//取值

localStorage.removeItem('key');//删除值

localStorage.clear();//清空所有值

嵌入的html中存值的js代码:
把值存入Local Storage

function SaveInHuoZiGe() {console.log("****成功调用SaveInHuoZiGe()****")console.log("data:");console.log(imageData);var path = imageData.path;var src = imageData.src;var name = path.replace(/^.*[\\\/]/, '');//把需要传递的值存到localStorage中localStorage.setItem('path', path);localStorage.setItem('src', src);localStorage.setItem('name', name);
}

活字格中取值并存入数据库的js代码:

从Local Storage取值,并清除存储器

//获取值
var path = localStorage.getItem('path');
var src = localStorage.getItem('src');
var name = localStorage.getItem('name');console.log("imgPath:", path);
console.log("imgSrc:", src);
console.log("imgSrc:", name);if (name === false || name == null) {console.log('未检测到照片回调或没有开启本地存储localStorage,请尝试清除缓存');Forguncy.Page.getCell("savePhotoResult").setValue('失败');
} else {Forguncy.modifyTablesData({image: {addRows: [{name: name, code: path, base64: src, is_identify: "未识别"}],}});Forguncy.Page.getCell("savePhotoResult").setValue('成功');
}//释放空间
localStorage.clear();
// localStorage.removeItem('path');
// localStorage.removeItem('src');
// localStorage.removeItem('name');

控制台查看存储位置:

F12-应用程序-本地存储

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/454965.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Oracle数据表ID自增操作

一、Oracle ID自增长功能介绍 Oracle数据库默认不支持像 SQLServer、MySQL中的自增长(auto increment)功能,即自动为每一行记录的自增长字段生成下一个值。 二、Oracle ID自增长方法 第一种,通过序列(sequence&#…

c++之说_10|自定义类型 union 联合体

之前我们说了一些 struct 结构体 现在来了解新的自定义类型 union 联合体 语法 union ptr {void* fptr;CLassFunPtr p;FunPtr p2;ptr& operator(CLassFunPtr ptr){p ptr;return *this;}ptr& operator(FunPtr Fptr){p2 Fptr;return *this;} } FunPtr_; 我们看到了…

【技能树学习】Git入门——练习题解析

前言 本篇文章给出了Git入门技能树中部分的练习题解析,包括分支管理,Git标签,在Mac和Windows上使用GitVSCode的步骤。强调了git cherry-pick不直接支持从标签中选择提交,git tag -d只能删除本地标签,Mac系统的终端可以…

【产品升级】SmartPipe升级到版本2.0

在近一个月的攻关和测试下,SmartPipe软件轴线自动识别算法的性能大幅提升,鲁棒性和稳定性进一步增强。近一年来客户累计反馈的多种复杂管路(包括带有支管管路、带有压瘪段管路、推弯管、装配管、带有复杂孔洞管路等)现在均能够正确…

离散数学——图论(笔记及思维导图)

离散数学——图论(笔记及思维导图) 目录 大纲 内容 参考 大纲 内容 参考 笔记来自【电子科大】离散数学 王丽杰

Antd+React+react-resizable实现表格拖拽功能

1、先看效果 2、环境准备 "dependencies": {"antd": "^5.4.0","react-resizable": "^3.0.4",},"devDependencies": {"types/react": "^18.0.33","types/react-resizable": "^…

Excel——高级筛选匹配条件提取数据

一、筛选多条件 Q:筛选多个条件,并将筛选出的内容复制到其他区域 点击任意一个单元格 点击【数据】——【筛选】——【高级筛选】 选择【将筛选结果复制到其他位置】——在【列表区域】 鼠标选择对应的区域位置,条件区域一定要单独写出来&a…

JVM 性能调优 - Java 虚拟机内存体系(1)

Java 虚拟机我们简称为 JVM(Java Virtual Machine)。 Java 虚拟机在执行 Java 程序的过程中,会管理几个不同的数据区域。如下图所示: 下面我会介绍这几个数据区的特点。 堆 堆区的几个特点: 线程共享。启动时创建堆…

L1-009 N个数求和-java

输入样例1: 5 2/5 4/15 1/30 -2/60 8/3输出样例1: 3 1/3输入样例2: 2 4/3 2/3输出样例2: 2输入样例3: 3 1/3 -1/6 1/8输出样例3: 7/24 这是使用递归的另一种计算最大公约数的方法。 如果 b 为0&#…

【从0上手Cornerstone3D】如何使用CornerstoneTools中的工具之同步器

同步器(Synchronizers)可以使多个视图同步响应同一个工具的操作,例如我们在MPR视图下,同步操作三个视图的缩放程度、windowLevel等等 一个同步器必须需要以下几个部分才可以执行 一个监听事件(什么情况下触发同步&…

3D力导向树插件-3d-force-graph学习001

一、引入文件:下载静态js文件引入 1、**以vue项目测试,在index.html文件中引入静态文件(js文件可在官网下载)** 2、**也曾尝试用npm包下载引入的方法,总是会有报错,所以采用静态js文件引入的方式** 二、基…

浅析软件测试中的一些常见理论:杀虫剂效应、金字塔模型、缺陷集群性原则、软件测试活动依赖于软件测试背景、软件测试的7大基本原则

这篇文章我主要想记录学习一下在软件测试行业中的一些常见理论效应以做基本了解。 一、杀虫剂效应 1、杀虫剂效应介绍 杀虫剂效应原本指农业中随着农药的普及使用,害虫对农药的抗药性就越来越强,农药就越来越难杀死害虫。在农场里为了对付破坏农作物的…