活字格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-应用程序-本地存储