活字格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.mzph.cn/news/679391.shtml

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

相关文章

《统计学简易速速上手小册》第9章:统计学在现代科技中的应用(2024 最新版)

文章目录 9.1 统计学与大数据9.1.1 基础知识9.1.2 主要案例:社交媒体情感分析9.1.3 拓展案例 1:电商销售预测9.1.4 拓展案例 2:实时交通流量分析 9.2 统计学在机器学习和人工智能中的应用9.2.1 基础知识9.2.2 主要案例:预测客户流…

python 基础知识点(蓝桥杯python科目个人复习计划38)

今日复习内容:DFS的剪枝 我理解的剪枝,和《运筹学》里面“分支定界法”的剪枝操作一样,不停按照题目所给条件分割,当所得目标函数的值已偏离最优解时,就将其减去。 例题1:数字王国之军训排队 题目描述&a…

2023年度总结 EXI-小洲

2023年度总结 EXI-小洲 文章目录 2023年度总结 EXI-小洲前言一、2023的记录1.1 工作1.2 副业1.2.1 投资1.2.2 接活 1.3 减肥1.4 校园 二、核对2022的flag三、反思四、展望2024 前言 一、2023的记录 1.1 工作 关于目前的工作,我用两个词语来介绍:运气、…

【算法训练营】数字盒子,重编码,成绩排序(python实现)

数字盒子 问题描述 你有一个盒子,你可以往里面放数,也可以从里面取出数。 初始时,盒子是空的,你会依次做 Q 个操作,操作分为两类: 插入操作:询问盒子中是否存在数 x,如果不存在则把数…

【算法系列】隐马尔可夫链预测问题-从维特比到SLAM

前言 视频讲解在我女朋友的B站『隐马尔可夫链预测问题-从维特比到SLAM』 在上一篇文章《终于有人把隐马尔可夫链的前向后向算法讲懂了!》中,我们讲解了隐马尔科夫链中三个基本问题中的概率计算问题的前向后向求解方法: 概率计算问题&#x…

Linux---网络套接字

端口号 端口号 端口号是一个2字节16位的整数; 端口号用来标识一个进程, 告诉操作系统, 当前的这个数据要交给哪一个进程来处理; IP地址 端口号能够标识网络上的某一台主机的某一个进程; 一个端口号只能被一个进程占用 在公网上,IP地址能表示唯一的一台主机&…

人工智能如何彻底改变身份欺诈

据 AuthenticID 称,近一半的企业报告合成身份欺诈有所增加,而生物识别欺骗和伪造 ID 欺诈尝试也有所增加。 在当今的数字化存在中,消费者和企业都面临着新的挑战,从考虑数字身份的影响到应对生成人工智能等新工具的使用和流行。与…

【小沐学GIS】基于WebGL绘制三维数字地球Earth(OpenGL)

🍺三维数字地球系列相关文章如下🍺:1【小沐学GIS】基于C绘制三维数字地球Earth(OpenGL、glfw、glut)第一期2【小沐学GIS】基于C绘制三维数字地球Earth(OpenGL、glfw、glut)第二期3【小沐学GIS】…

【C语言】C的整理记录

前言 该笔记是建立在已经系统学习过C语言的基础上,笔者对C语言的知识和注意事项进行整理记录,便于后期查阅,反复琢磨。C语言是一种面向过程的编程语言。 原想在此阐述一下C语言的作用,然而发觉这些是编程语言所共通的作用&#…

一键打造属于自己漏扫系统

0x01 工具介绍 本系统是对Web中间件和Web框架进行自动化渗透的一个系统,根据扫描选项去自动化收集资产,然后进行POC扫描,POC扫描时会根据指纹选择POC插件去扫描,POC插件扫描用异步方式扫描.前端采用vue技术,后端采用python fastapi。 0x02 安装与使用 1、Docker部署环境 编译…

C语言学习记录

牛牛学说话之-字符_牛客题霸_牛客网 (nowcoder.com) 总结: 字符定义为char,对应%c 整数定义为int,对应%d 分数对应float,对应%f,内存小,速度快 分数对应double,对应%lf,范围广,精度高 保留几位小数就是…

C++入门学习(二十七)跳转语句—break语句

1、与switch语句联合使用 C入门学习&#xff08;二十三&#xff09;选择结构-switch语句-CSDN博客 #include <iostream> #include <string> using namespace std;int main() { int number;cout<<"请为《斗萝大路》打星(1~5※)&#xff1a;" &…

Linux操作系统基础(十一):RPM软件包管理器

文章目录 RPM软件包管理器 一、rpm包的卸载 二、rpm包的安装 RPM软件包管理器 rpm&#xff08;英文全拼&#xff1a;redhat package manager&#xff09; 原本是 Red Hat Linux 发行版专门用来管理 Linux 各项软件包的程序&#xff0c;由于它遵循GPL规则且功能强大方便&…

单片机学习笔记---AT24C02(I2C总线)

目录 有关储存器的介绍 存储器的简介 存储器简化模型 AT24C02介绍 AT24C02引脚及应用电路 I2C总线介绍 I2C电路规范 开漏输出模式和弱上拉模式 其中一个设备的内部结构 I2C通信是怎么实现的 I2C时序结构 起始条件和终止条件 发送一个字节 接收一个字节 发送应答…

Stable Diffusion 模型下载:ToonYou(平涂卡通)

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十 下载地址 模型介绍 ToonYou 是一个平涂风格的卡通模型&#xff0c;它的画风独特、光感强烈、画面…

Ubuntu Desktop - Details (设备详情)

Ubuntu Desktop - Details [设备详情] 1. OverviewReferences 1. Overview System Settings -> Details -> Overview ​ References [1] Yongqiang Cheng, https://yongqiang.blog.csdn.net/

单片机在物联网中的应用

单片机&#xff0c;这个小巧的电子设备&#xff0c;可能听起来有点技术性&#xff0c;但它实际上是物联网世界中的一个超级英雄。简单来说&#xff0c;单片机就像是各种智能设备的大脑&#xff0c;它能让设备“思考”和“行动”。由于其体积小、成本低、功耗低、易于编程等特点…

【C++第二阶段】赋值运算符重载

你好你好&#xff01; 以下内容仅为当前认识&#xff0c;可能有不足之处&#xff0c;欢迎讨论&#xff01; 文章目录 赋值运算符重载 赋值运算符重载 实验①&#xff0c;还没有对析构运算符重载时 #include<iostream> #include<string> using namespace std;clas…

失去中国市场的三星仍是全球第一,但中国手机无法失去海外市场

随着2023年分析机构公布全球手机市场和中国手机市场的数据&#xff0c;业界终于看清中国市场早已没有以前那么重要&#xff0c;三星、苹果这些国际品牌对中国市场的依赖没有他们想象的那么严重&#xff0c;相反中国手机对海外市场比以往任何时候都要更依赖了。 三星在2023年被苹…

消息队列使用的四种场景介绍

一、简介 消息队列中间件是分布式系统中重要的组件&#xff0c;主要解决应用耦合&#xff0c;异步消息&#xff0c;流量削锋等问题。 实现高性能&#xff0c;高可用&#xff0c;可伸缩和最终一致性架构。 使用较多的消息队列有ActiveMQ&#xff0c;RabbitMQ&#xff0c;ZeroMQ…