Web前端开发（HTML5+CSS3+JavaScript） 实验8-综合应用.docx

PAGE2/NUMPAGES6

XXX学院

实验报告

成绩

专业班级

实验日期

姓名

学号

实验名称

综合应用

指导教师

（报告内容包括实验目的、实验设备及器材、实验步骤、程序框图、代码、运行结果、实验小结等）

实验要求

给出HTML文档的内容index.html，其运行效果如图8.1所示。要求编写代码，在单击“提交数据”按钮时，获取表单数据并暂存在本地，然后重定向到显示数据的页面。

在显示页面result.html中，读取暂存的数据并展示在页面中，如图8.2所示；单击“返回注册”链接时，重定向到注册页面

需要提交文档和项目文件（压缩包）。

提示：

数据保存可以使用sessionStorage对象

保存数据的格式可以参考如下对象结构：

varuserData={user:,pwd:,city:,sex:,hobbys:[]}

将JS对象转换为字符串的方法为：JSON.stringify();将字符串还原为对象的方法为：JSON.parse()

图8.1注册页面index.html

图8.2结果页面result.html

二、实验目的

1.熟悉HTML常用表单元素的使用。

2.掌握使用JavaScript来查询和获取表单元素属性的方法。

3.掌握存储对象storage的使用

4.掌握JSON对象的使用。

三、实验设备

Windows7/10、32/64操作系统;安装VSCode开发环境;安装FireFox/Chrome浏览器的计算机。

四、实验步骤

1.打开VScode，新建html文件；

2.编写代码；

3.在浏览器运行、调试。

五、代码(粘帖至此行)

六、运行结果(截图)

七、实验小结(收获或存在问题、改进措施、教学建议等)