项目场景:
活字格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-应用程序-本地存储