首页> 图书频道> 工学> 计算机科学

7.5  实现一个日记式事务提醒系统

2025年09月26日
版权
7.5 实现一个日记式事务提醒系统

在HTML 5应用中，可以使用localStorage对象的方法setItem将数据永久保存在客户端计算机中，并且按照“键名/键值”的形式进行保存。将第一个参数设置为键名，将第二个参数设置为键值。保存时不允许重复保存相同的键名。保存后可以修改键值，但不允许修改键名，只能重新取键名，然后再保存键值。

978-7-111-53392-4-Part03-62.jpg

使用localStorage对象的方法getItem将数据读取到变量中，将参数指定为键名，返回键值并保存到变量中。

下面通过一个实例讲解开发一个日记式事务提醒系统的方法。

978-7-111-53392-4-Part03-63.jpg

本实例的功能是，制作一个HTML 5版本的日记式事务提醒系统。当打开浏览器浏览本实例网页时时，在日记式事务系统中显示当天日期和用户在当天有哪些必须要处理的事件。可以在日期文本框中使用选择的方式输入其他日期，然后在日记式事务系统中输入选择的日期所要处理的事件并保存。这样当用户在所选择的日期打开浏览器时，浏览器会在日记式事务提醒系统中显示在该日要处理的事件。实例文件10.html的实现代码如下。

978-7-111-53392-4-Part03-64.jpg

编写脚本文件js10.js，在脚本代码的开始处定义了脚本代码中所使用的两个全局变量，其中变量dateElement表示页面中的选择日期文本框，变量today表示页面中用来显示当天日期的span元素。文件js10.js的代码如下。

978-7-111-53392-4-Part03-65.jpg

978-7-111-53392-4-Part03-66.jpg

执行后的效果如图7-15所示。

978-7-111-53392-4-Part03-67.jpg

图7-15 执行效果