这是微博秀地方
KUYH

Web Storage本地存储作为简易数据库使用(实例)

文章目录
[隐藏]

Web Storage功能,顾名思义,就是在Web上存储数据的功能,这里的存储是针对客户端本地而言的。具体来说,Web Storage又分为两种:

1.sessionStorage

将数据保存在session对象中。所谓session,是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

2.localStorage

将数据保存在客户端本地的硬件设备(通常指硬盘,也可以是其他硬件设备)中,即使浏览器被关闭了,该数据仍然存在,下次打开浏览器访问网站时仍然可以继续使用。这两者的区别在于,sessionStorage为临时保存,而localStorage为永久保存。到目前为止,Firefox 3.6以上、Chrome 6以上、Safari 5以上、Opera 10.50以上、IE 8以上版本的浏览器支持sessionStorage与localStorage的使用。

接下来具体看一下sessionStorage与localStorage的使用示例。

在利用Web Storage保存数据时,数据必须是“键名/键值”这个格式,所以将文本框的内容作为键值,保存时的日期和时间作为键名进行保存,计算机中的日期和时间的值是以时间戳(1970年1月1日凌晨12点后经过的秒数)的形式进行管理的,所以保存时不可能存在重复的键名。

下面是使用localStorage存储形式实现的一个简单留言板功能

源代码:

html部分

如果想要用Web Storage作为数据库,有几个问题必须考虑。首先,在数据库中,大多数表都分为几列,怎样对列进行管理呢?怎样对数据进行检索呢?如果能够解决这些问题,就可以将Web Storage用作数据库。

这一次来看一个非常简单的“客户联系信息管理网页”这个示例。客户的联系信息分为姓名、Email地址、电话号码、备注这几列,它们保存在localStorage中。如果输入客户的姓名并且进行检索,那么可以获取这个客户的所有联系信息。

首先,保存数据的时候将客户的姓名作为键名进行保存,这样在获取客户其他信息的时候会比较方便。那么,怎样将客户联系信息分几列进行保存呢?要做到这一点,需要使用JSON格式。

将对象以JSON格式作为文本保存,获取该对象时再通过JSON格式进行获取,这样就可以在Web Storage中保存和读取具有复杂结构的数据了。

示例页面代码:

html部分

这一次,这个脚本文件中存放了两个函数,分别是保存数据用的saveStorage函数与检索数据用的findStorage函数。

下面分别看一下这两个函数。

3.saveStorage函数中的流程

1)从各输入文本框中获取数据。
2)创建对象,将获取的数据作为对象的属性进行保存。
3)将对象转换成JSON格式的文本数据。
4)将文本数据保存在localStorage中。
为了将数据保存在一个对象中,使用new Object语句创建了一个对象,将各种数据保存在该对象的各个属性中,然后,为了将对象转换成JSON格式的文本数据,使用了JSON对象的stringify方法。
该方法接受一个参数data,该参数表示要转换成JSON格式文本数据的对象。这个方法的作用是将对象转换成JSON格式的文本数据,该方法返回转换完成后的文本数据。

4.findStorage函数中的流程

1)在localStorage中,将检索用的姓名作为键值,获取对应的数据。
2)将获取的数据转换成JSON对象。
3)取得JSON对象的各个属性值,创建要输出的内容。
4)将输出内容在页面上进行输出。该函数的关键是使用JSON对象的parse方法,将从localStorage中获取的数据转换成JSON对象。

parse方法的使用方法如下所示:

var data = JSON.parse(str);
该方法接受一个参数str,该参数表示从localStorage中取得的数据,该方法的作用是将传入的数据转换成JSON对象,并且将该对象返回。

码字很辛苦,转载请注明来自KUYH《Web Storage本地存储作为简易数据库使用(实例)》

评论