indexDBInstance.html文件内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<script>
var db;
var arrayKey=[]
var openRequest;
var lastCursor;
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
function init()
{
//打开数据库
openRequest = indexedDB.open("messageIndexDB");
//只能在onupgradeneeded创建对象存储空间
openRequest.onupgradeneeded = function(e)
{
console.log("running onupgradeneeded");
var thisDb = e.target.result;
if(!thisDb.objectStoreNames.contains("messageIndexDB"))
{
console.log("I need to create the objectstore");
/*
*创建对象存储空间，第一个参数必须和打开数据库的第一个参数一致
*设置键名是id,并且可以自增.
*autoIncrement默认是false,keyPath默认null
*/
var objectStore = thisDb.createObjectStore("messageIndexDB", { keyPath: "id", autoIncrement:true });
/*
*创建索引
*第一个参数是索引名,第二个是属性名,第三个设置索引特性
*/
objectStore.createIndex("name", "name", { unique: false });
}
}
openRequest.onsuccess = function(e)
{
//e.target.result返回一个数据库实例
db = e.target.result;
db.onerror = function(event)
{
alert("数据库错误: " + event.target.errorCode);
console.dir(event.target);
};
if(db.objectStoreNames.contains("messageIndexDB"))
{
console.log("contains messageIndexDB");
//读写方式开启事务
var transaction = db.transaction(["messageIndexDB"],"readwrite");
transaction.oncomplete = function(event)
{
// console.log("All done!");
};
transaction.onerror = function(event)
{
// 错误处理
console.dir(event);
};
//var content= document.querySelector("#content");
//得到messageIndexDB的objectStore对象
var objectStore = transaction.objectStore("messageIndexDB");
//游标查询
objectStore.openCursor().onsuccess = function(event)
{
//event.target.result获取存储空间的下一个对象
var cursor = event.target.result;
var flag=0;
//判断是否存在下一个对象,不存在是curson为null
if (cursor)
{
console.log(cursor.key); //获取键
console.dir(cursor.value); //实际对象,一个Object实例
var msgList= document.querySelector("#messageList");
var msgDiv=document.createElement("div");
var msgTxt = document.createTextNode(cursor.value[flag]["name"]+"说："+cursor.value[flag]["content"]);
msgDiv.id=cursor.key;
msgDiv.appendChild(msgTxt);
msgList.appendChild(msgDiv);
arrayKey.push(cursor.key);
flag++;
lastCursor=cursor.key;
cursor.continue(); //将游标下移一项
}
else
{
console.log("Done with cursor");
}
};
//错误处理
objectStore.openCursor().onerror=function(event){
console.dir(event);
};
}
};
openRequest.onerror = function (event) {
// 对request.error做一些需要的处理！
console.log("your web may not support IndexedDB,please check.");
};
//焦点处理
document.querySelector("#message").addEventListener("focus",function()
{
this.value = "";
});
document.querySelector("#name").addEventListener("focus",function()
{
this.value = "";
});
//添加数据
document.querySelector("#btn1").addEventListener("click", function()
{
var content=document.querySelector("#message").value;
var name=document.querySelector("#name").value;
/*var address=document.querySelector("#address").value;*/
var messageIndexDB=[{"name":name,"content":content}];
var transaction = db.transaction(["messageIndexDB"], "readwrite");
transaction.oncomplete = function(event)
{
// console.log("transaction complete");
};
transaction.onerror = function(event)
{
console.dir(event);
};
//得到messageIndexDB的objectStore对象
var objectStore = transaction.objectStore("messageIndexDB");
objectStore.add(messageIndexDB);
objectStore.openCursor().onsuccess = function(event)
{
cursor = event.target.result;
var key;
if(lastCursor==null)
{
key=cursor.key;
lastCursor=key;
}
else
{
key=++lastCursor;
}
var msgList= document.querySelector("#messageList");
var msgDiv=document.createElement("div");
msgDiv.id=key;
var msgTxt = document.createTextNode(name+"说："+content);
msgDiv.appendChild(msgTxt);
msgList.appendChild(msgDiv);
arrayKey.push(key);
console.log("success add new record!key:"+key);
console.dir(messageIndexDB);
}
});
//删除
document.querySelector("#delete").addEventListener("click", function()
{
if(arrayKey.length==0){
console.log("no data to delete!");
}
else
{
var transaction = db.transaction(["messageIndexDB"], "readwrite");
transaction.oncomplete = function(event)
{
// console.log("transaction complete!");
};
transaction.onerror = function(event)
{
console.dir(event);
};
//得到messageIndexDB的objectStore对象
var objectStore = transaction.objectStore("messageIndexDB");
var removeKey=arrayKey.shift();
//获取key
var getRequest=objectStore.get(removeKey);
getRequest.onsuccess=function(e)
{
var result =getRequest.result;
console.dir(result);
}
//删除key
var request=objectStore.delete(removeKey);
request.onsuccess = function(e)
{
console.log("success delete record!");
};
request.onerror = function(e)
{
console.log("Error delete record:", e);
};
//隐藏要删除的元素
document.getElementById(removeKey).style.display="none";
}
});
}
window.addEventListener("DOMContentLoaded", init, false);
</script>
<STYLE TYPE="text/css" MEDIA=screen>
<!--
body{
font-size: 20px;
-webkit-text-size-adjust:none;
}
-->
</STYLE>
</head>
<body>
<h1>简单留言板（js+IndexedDB数据库实现）</h1>
<form>
昵称：<input id="name" type="text" name="name"><br>
内容：<textarea id="message" rows="3" cols="20"></textarea><br>
<input id="btn1" type="button" value="提交留言" />
<input id="delete" type="button" value="删除留言" />
</form>
<br>
<p1>留言列表</p1>
<div id="messageList"></div>
</body>
</html>
运行效果：
点击一次“删除留言”，重新打开浏览器，数据仍然存在，如下所示：
PS：
1.要注意一点的是，在创建对象存储空间的时候，必须在openRequest.onupgradeneeded 中创建，否则出错；
2.由于IndexedDB不能实现共享，所以每个客户端打开时IndexedDB保存的数据不一致。
相关推荐
这可能利用JavaScript的某种库，如localStorage或IndexedDB来实现，或者通过Ajax与服务器进行通信，使用轻量级的后端技术如Node.js或PHP来处理数据。这种本地存储方式让用户可以在离线状态下查看和添加留言，但可能...
4. **数据存储**：应用可能利用前端JavaScript库（如localStorage或IndexedDB）或后端数据库（如MongoDB或MySQL）来存储用户创建的活动和留言。这确保了即使在关闭浏览器后，数据也能被持久化保存。 5. **API集成**...
嵌入式八股文面试题库资料知识宝典-华为的面试试题.zip
训练导控系统设计.pdf
嵌入式八股文面试题库资料知识宝典-网络编程.zip
人脸转正GAN模型的高效压缩.pdf
少儿编程scratch项目源代码文件案例素材-几何冲刺 转瞬即逝.zip
少儿编程scratch项目源代码文件案例素材-鸡蛋.zip
嵌入式系统_USB设备枚举与HID通信_CH559单片机USB主机键盘鼠标复合设备控制_基于CH559单片机的USB主机模式设备枚举与键盘鼠标数据收发系统支持复合设备识别与HID
嵌入式八股文面试题库资料知识宝典-linux常见面试题.zip
面向智慧工地的压力机在线数据的预警应用开发.pdf
基于Unity3D的鱼类运动行为可视化研究.pdf
少儿编程scratch项目源代码文件案例素材-霍格沃茨魔法学校.zip
少儿编程scratch项目源代码文件案例素材-金币冲刺.zip
内容概要：本文深入探讨了HarmonyOS编译构建子系统的作用及其技术细节。作为鸿蒙操作系统背后的关键技术之一，编译构建子系统通过GN和Ninja工具实现了高效的源代码到机器代码的转换，确保了系统的稳定性和性能优化。该系统不仅支持多系统版本构建、芯片厂商定制，还具备强大的调试与维护能力。其高效编译速度、灵活性和可扩展性使其在华为设备和其他智能终端中发挥了重要作用。文章还比较了HarmonyOS编译构建子系统与安卓和iOS编译系统的异同，并展望了其未来的发展趋势和技术演进方向。; 适合人群：对操作系统底层技术感兴趣的开发者、工程师和技术爱好者。; 使用场景及目标：①了解HarmonyOS编译构建子系统的基本概念和工作原理；②掌握其在不同设备上的应用和优化策略；③对比HarmonyOS与安卓、iOS编译系统的差异；④探索其未来发展方向和技术演进路径。; 其他说明：本文详细介绍了HarmonyOS编译构建子系统的架构设计、核心功能和实际应用案例，强调了其在万物互联时代的重要性和潜力。阅读时建议重点关注编译构建子系统的独特优势及其对鸿蒙生态系统的深远影响。
嵌入式八股文面试题库资料知识宝典-奇虎360 2015校园招聘C++研发工程师笔试题.zip
嵌入式八股文面试题库资料知识宝典-腾讯2014校园招聘C语言笔试题（附答案）.zip
双种群变异策略改进RWCE算法优化换热网络.pdf
内容概要：本文详细介绍了基于瞬时无功功率理论的三电平有源电力滤波器（APF）仿真研究。主要内容涵盖并联型APF的工作原理、三相三电平NPC结构、谐波检测方法（ipiq）、双闭环控制策略（电压外环+电流内环PI控制）以及SVPWM矢量调制技术。仿真结果显示，在APF投入前后，电网电流THD从21.9%降至3.77%，显著提高了电能质量。 适用人群：从事电力系统研究、电力电子技术开发的专业人士，尤其是对有源电力滤波器及其仿真感兴趣的工程师和技术人员。 使用场景及目标：适用于需要解决电力系统中谐波污染和无功补偿问题的研究项目。目标是通过仿真验证APF的有效性和可行性，优化电力系统的电能质量。 其他说明：文中提到的仿真模型涉及多个关键模块，如三相交流电压模块、非线性负载、信号采集模块、LC滤波器模块等，这些模块的设计和协同工作对于实现良好的谐波抑制和无功补偿至关重要。
内容概要：本文探讨了在工业自动化和物联网交汇背景下，构建OPC DA转MQTT网关软件的需求及其具体实现方法。文中详细介绍了如何利用Python编程语言及相关库（如OpenOPC用于读取OPC DA数据，paho-mqtt用于MQTT消息传递），完成从OPC DA数据解析、格式转换到最终通过MQTT协议发布数据的关键步骤。此外，还讨论了针对不良网络环境下数据传输优化措施以及后续测试验证过程。 适合人群：从事工业自动化系统集成、物联网项目开发的技术人员，特别是那些希望提升跨协议数据交换能力的专业人士。 使用场景及目标：适用于需要在不同通信协议间建立高效稳定的数据通道的应用场合，比如制造业生产线监控、远程设备管理等。主要目的是克服传统有线网络限制，实现在不稳定无线网络条件下仍能保持良好性能的数据传输。 其他说明：文中提供了具体的代码片段帮助理解整个流程，并强调了实际部署过程中可能遇到的问题及解决方案。