利用WebStorage API实现浏览器存储

下面讲解如何使用WebStorage的API。目前WebStorage的API如下属性是非法的：

①Length：获得当前WebStorage中的数目。

②key（n）：返回WebStorage中的第n个存储条目。

③getItem（key）：返回指定key的存储内容，如果不存在则返回null。

注意，返回的类型是string字符串类型。

④setItem（key，value）：设置指定key的内容的值为value。

⑤removeItem（key）：根据指定的key，删除键值为key的内容。

⑥clear：清空WebStorate的内容。

可以看到，WebStorageAPI的操作机制实际上是对键值对进行操作。下面是一些相关的应用。

1.数据的存储与获取

在localStorage中设置键值对数据可以应用setItem（），代码如下：

localStorage.setItem("key","value);

获取数据可以应用getItem（），代码如下：

varval=localStorage.getItem("key");

当然也可以直接使用localStorage的key方法，而不使用setItem和getItem方法，代码如下：

localStorage.key="value";(www.xing528.com)

varval=localStorage.key;

HTML5存储是基于键值对（key／value）的形式存储的，每个键值对被称为一个项（item）。存储和检索数据都是通过指定的键名，键名的类型是字符串类型。其值可以是包括字符串、布尔值、整数或者浮点数在内的任意JavaScript支持的类型。但是，最终数据是以字符串类型存储的。

调用结果是将字符串value设置到sessionStorage中，这些数据随后可以通过键key获取。调用setItem（）时，如果指定的键名已经存在，那么新传入的数据会覆盖原先的数据。调用getItem（）时，如果传入的键名不存在，那么会返回null，而不会抛出异常。

2.数据的删除和清空

removeItem（）用于从Storage列表删除数据，代码如下：

varval=sessionStorage.removeItem(key);

也可以通过传入数据项的key来删除对应的存储数据，代码如下：

varval=sessionStorage.removeItem(1);

说明：数字1会被转换为string，因为key的类型就是字符串。

clear（）方法用于清空整个列表的所有数据，代码如下：

sessionStorage.clear();

同时可以通过使用length属性获取Storage中存储的键值对的个数：

varval=sessionStorage.length;

注意：removeItem可以清除给定的key所对应的项，如果key不存在则“什么都不做”；clear会清除所有的项，如果列表本来就是空的就“什么都不做”。