7.6  使用sessionStorage来实现客户端的session功能

7.6 使用sessionStorage来实现客户端的session功能

在HTML 5应用中,sessionStorage有如下三个常用的方法。

(1)sessionStorage.setItem(key,value)

使用sessionStorage对象的setItem方法,可以将数据保存在客户端的session中,在保存数据时会按照“键名/键值”的形式进行保存。将第一个参数指定为键名,将第二个参数指定为键值。并且在保存时不允许重复保存相同的键名。保存后可以修改键值,但不允许修改键名(只能重新取键名,然后再保存键值)。

(2)变量=sessionStorage.getItem(key)

通过使用sessionStorage对象的getItem方法,可以读取session中的数据并保存到变量中,将参数指定为键名,返回键值并保存到变量中。

(3)sessionStorage.removeItem(key)

通过使用sessionStorage对象中的removeItem方法,可以删除客户端session中的指定键名所对应的键值数据。该方法接受一个参数key,该参数指定sessionStorage中的键名。执行该方法后,会删除sessionStorage中与键名相对应的键值内容,下次读取该键名中的内容时将读取不到(被设为NULL)。

下面通过一个实例讲解使用sessionStorage实现客户端session功能的方法。

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

本实例的功能是,演示如何使用Web Storage中的sessionStorage来实现客户端的session功能。实例文件11.html的实现代码如下。

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

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

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

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

脚本文件js11.js的代码如下。

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

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

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

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

文件11_1.html的代码如下。

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

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

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

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

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

脚本文件js11_1.js的代码如下。

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

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

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

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

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

图7-16 执行效果