活字格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://xiahunao.cn/news/2776158.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

第三百一十回

我们在上一章回中介绍了"再谈ListView中的分隔线",本章回中将介绍showMenu的用法.闲话休提,让我们一起Talk Flutter吧。 1. 概念介绍 我们在第一百六十三回中介绍了showMenu相关的内容,它主要用来显示移动PopupMenu在页面中的位置…

Git、github与gitee码云

1.git核心是两个仓库:本地仓库和远程仓库 主要用于团队合作和代码版本控制(个人现有版本代码出错可回溯上个提交版本的代码) 远程仓库国际主流githut,但外网速度问题,国内可使用码云gitee github:https:…

【开源】JAVA+Vue.js实现在线课程教学系统

目录 一、摘要1.1 系统介绍1.2 项目录屏 二、研究内容2.1 课程类型管理模块2.2 课程管理模块2.3 课时管理模块2.4 课程交互模块2.5 系统基础模块 三、系统设计3.1 用例设计3.2 数据库设计 四、系统展示4.1 管理后台4.2 用户网页 五、样例代码5.1 新增课程类型5.2 网站登录5.3 课…

vue3+vite+ts 配置commit强制码提交规范配置 commitlint

配置 git 提交时的 commit 信息,统一提交 git 提交规范 安装命令: npm install -g commitizen npm i cz-customizable npm i commitlint/config-conventional commitlint/cli -D 文件配置 根路径创建文件 commitlint.config.js module.exports {// 继承的规…

Backtrader 文档学习- Plotting -Plotting on the same axis

Backtrader 文档学习- Plotting -Plotting on the same axis 1.概述 在同一轴上绘图,绘图是在同一空间上绘制原始数据和稍微(随机)修改的数据,但不是在同一轴上。 核心代码,data数据正负50点。 # The filter which changes the close pri…

java面试题:MySQL中的各种JOIN的区别

表关联是频率非常高的一种数据库操作,在MySQL中,这种JOIN操作有很多类型,包括内联接、左外连接、右外连接等等,而每种连接的含义都不一样,如果死记硬背,不仅很难记住,而且也容易搞混淆&#xff…

JAVA Web 学习(三)Web服务架构

五、软件架构模式——MVC MVC是一种 分层开发的模式 ,其中:M-Model,业务模型,处理业务;V:View,视图,界面展示;C:Controller,控制器,处…

基于华为云欧拉操作系统(HCE OS)容器化部署传统应用(Redis+Postgresql+Git+SpringBoot+Nginx)

写在前面 博文内容为 华为云欧拉操作系统入门级开发者认证(HCCDA – Huawei Cloud EulerOS)实验笔记整理认证地址:https://edu.huaweicloud.com/certificationindex/developer/9bf91efb086a448ab4331a2f53a4d3a1博文内容涉及一个传统 Springboot 应用HCE部署&#x…

JavaScript 入门 完整版

目录 第一个知识点:引入js文件 内部引用: 外部引用: 第二个知识点:javascript的基本语法 定义变量: 条件控制(if - else if - else) 第三个知识点:javascript里的数据类型、运算符: 数字类型 字符串类型 布尔…

新型Black Matter勒索病毒,勒索300万美金

前言 BlackMatter勒索病毒是一款基于RAAS模式的新型勒索病毒,该勒索病毒组织成立于2021年7月,该勒索病毒黑客组织对外宣称,已经整合了DarkSide、REvil和LockBit等勒索病毒的最佳功能特点。 勒索病毒黑客组织曾表示不会对医疗保健、关键基础设…

ncc匹配(五,匹配提速的思考)

感觉ncc(相关系数匹配)与bpnet(bp神经网络)相似,但ncc简洁方便快速,计算量小,问题点也少。 都有归一化的动作,都是相关性的学习,不过bpnet可以学习多种类型,…

RedissonClient妙用-分布式布隆过滤器

目录 布隆过滤器介绍 布隆过滤器的落地应用场景 高并发处理 多个过滤器平滑切换 分析总结 布隆过滤器介绍 布隆过滤器(Bloom Filter)是1970年由布隆提出的。它实际上是一个很长的二进制向量和一系列随机映射函数。布隆过滤器可以用于检索一个元素是…

云服务器总结

1.服务器重装系后远程连接报错 Host key for xxx.xxx.xxx.xxx has changed and you have requested strict checking. 问题原因 ssh会把你每个你访问过计算机的公钥(public key)都记录在~/.ssh/known_hosts。当下次访问相同计算机时,OpenSSH会核对公钥。如果公钥不…

js手写Promise(下)

目录 resolve与reject的调用时机封装优化 回调返回PromiseisPromise手动调用then 微队列catchresolverejectall传入的序列为空传入的值非Promise race完整的Promise代码 如果没有看过上半部分的铁铁可以看看这篇文章 js手写Promise(上) resolve与reject…

kmeans聚类选择最优K值python实现

Kmeans算法中K值的确定是很重要的。 下面利用python中sklearn模块进行数据聚类的K值选择 数据集自制数据集,格式如下: 维度为3。 ①手肘法 手肘法的核心指标是SSE(sum of the squared errors,误差平方和), 其中,Ci是第…

最近vscode链接Autodl出现的问题

最近vscode链接Autodl出现的问题 一、问题的概述 在使用vscode连接autodl远程服务器的时候,在vscode的右下角出现了,以下的问题提示: 远程主机可能不符合glibc和libstdc VS Code服务器的先决条件 二、问题的原因 vscode版本过高的问题&…

搭建yum仓库服务器

安装 1.安装linux 1.1安装依赖 yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel 1.2下载 cd /opt/nginx wget http://nginx.org/download/nginx-1.25.3.tar.gz 1.3解压 tar -xvf nginx-1.25.3.tar.gz 1.4配置 cd nginx-1.25.3 ./configure --pre…

职业性格测试在求职应聘跳槽中的应用

人的性格总是千奇百怪,有的人总是想迎接挑战,超越自己,不停的奔着高处走,然而有的人总是喜欢随遇而安,踏踏实实一辈子,有份安稳的工作,有吃有喝就好。那么对于哪些喜欢迎接挑战,但又…

Linux下的crontab定时执行任务命令详解

在LINUX中,周期执行的任务一般由cron这个守护进程来处理[ps -ef|grep cron]。cron读取一个或多个配置文件,这些配置文件中包含了命令行及其调用时间。 cron的配置文件称为“crontab”,是“cron table”的简写。 一、cron服务   cron是一个…

1.CVAT建项目步骤

文章目录 1. 创建project2. 创建task2.1. label 标签详解2.2.高级配置 Advanced configuration 3. 分配任务4. 注释者规范 CVAT的标注最小单位是Task,每个Task为一个标注任务。 1. 创建project 假设你并不熟悉cvat的标注流程,这里以图像2D目标检测为例进…