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