HTML5数据存储

HTML5中增加了两种全新的数据存储方式:WebStorage和WebSQLDatabase。

WebStorage可用于临时或永久保存客户端的少量数据,WebSQLDatabase是客户端本地化的一套数据库系统,可以将大量的数据保存在客户端,无须与服务器端进行交互,极大地减轻了服务器端的压力。

WebStorage存储是HTML5为数据存储在客户端提供的一项重要功能,分为两种:sessionStorage(保存会话数据)和loaclStorage(在客户端长期保存数据)。

sessionStorage对象

使用sessionStorage对象在客户端保存的数据时间非常短暂,该数据实质上还是被保存在session对象中。用户在打开浏览器时,可以查看操作过程中要求临时保存的数据,一旦关闭浏览器,所有使用sessionStorage对象保存的数据将全部丢失。

保存数据只需调用setItem()方法,格式:sessionStorage.setItem(key,value)。参数key表示被保存内容的键名,参数value表示被保存的内容。一旦键名设置成功,则不允许修改,不能重复,如果有重复的键名,只能修改对应的键值。

读取被保存的数据,应该调用sessionStorage对象中getItem()方法,格式:sessionStorage.getItem(key)。该方法将返回一个指定键名对应的键值,如果不存在,则返回一个null值。

localStorage对象

长期在客户端保存数据,应该使用localStorage对象,使用该对象可以将数据长期保存在客户端,直至人工清除为止。

保存数据调用对象中的setItem()方法,格式:localStorage.setItem(key,value)。与sessionStorage对象保存数据一样。

读取数据调用对象中的getItem()方法,格式:localStorage.getItem(key)。与sessionStorage对象读取数据一样。

localStorage对象可以将内容长期保存在客户端,即使是重新打开浏览器也不会丢失。如果需要清除localStorage对象保存的内容,应该调用该对象的另一个方法removeItem(),格式:localStorage.removeItem(key)。一旦删除成功,与键名对应的相应数据将全部被删除。

HTML5数据存储_第1张图片

HTML5数据存储_第2张图片

 

你可能感兴趣的:(HTML5数据存储)