HTML5开发-使用sessionStorage对象

当在HTML 5页面中存储数据的时候，使用sessionStorage对象保存数据的时间较短，因为这个数据实质上是被保存在session对象中。当打开浏览器时，可以查看操作过程中临时保存的数据。如果关闭浏览器，所有用sessionStorage对象保存的数据会全部丢失。使用sessionStorage对象保存数据的方法非常简单，只需要调用setltem（）方法即可，具体调用格式如下：

■参数key：表示被保存内容的键名。

■参数value：表示被保存内容的键值，在使用setItem（）方法保存数据时，对应格式为“键

名、键值”。成功设置键名后不再允许修改，也不能重复。如果有重复的键名，则只

能修改对应的键值，即用新增重复的键名值取代原有重复的键名值。

当使用sessionStorage对象中的方法setItem（）保存数据后，如果需要读取被保存的数据，应该调用sessionStorage对象中getltem（）方法，具体调用格式如下：

其中，参数key表示设置保存时被保存内容的键名，该方法将返回一个指定键名对应的键值，如果不存在则返回一个null值。

下面将通过一个实例讲解使用sessionStorage对象保存并读取临时数据的方法。

在本实例中分别创建了一个文本框和一个读取按钮，当在文本框中输入内容时，通过sessionStorage对象保存文本框输入的内容，并即时显示在页面中。当单击“读取”按钮时会直接读取被保存的临时数据。实例文件3.html的代码如下。

编写脚本文件js3.js，当在文本框txtName_change（）中输入内容时会触发onChange事件，在此调用了自定义的函数txtName_change（），此函数的运作流程如下。

（1）通过变量strName获取传过来的文本框内容。(www.xing528.com)

（2）通过调用sessionStorage对象中的setItem（）方法，将该内容值保存到Session对象中，其中键名为“strName”，对应键值为已获取内容的变量strName。

（3）完成保存后调用sessionStorage对象中的getItem（）方法，根据保存的键名将对应的键值通过ID号为“pStatus”的元素<p>显示在页面中。

文件js3.js的代码如下。

样式文件css.css的代码如下。

执行后的效果如图7-3所示，在文本框中输入数据，例如输入“123”，单击“读取”按钮后会在下方显示存储的数据。如图7-4所示。

图7-3 初始效果

图7-4 显示存储的数据