基于Web Storage设计的留言册

2018-01-04王炳鹏

电脑知识与技术 2018年28期

王炳鹏

摘要：HTML4的存储机制是利用cookies进行，但cookies存储机制存在很多缺点，HTML5转而使用Web Storage存储机制。本文利用Web Storage设计实现一个留言册。

关键词：HTML5；Web Storage；Local Storage

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2018）28-0072-01

Design of Message Book Based on Web Storage

WANG Bing-peng

（The Department of Information Processing and Control Engineering， Lanzhou Petrochemical Polytechnic， Lanzhou 730060， China）

Abstract：The storage mechanism of HTML4 is using cookies， but there are many shortcomings in the cookies. HTML5 uses the Web Storage instead. This article uses Web Storage to design and implement a message book.

Key words：HTML5； Web Storage； Local Storage

1 Web Storage概述

Web应用的飞速发展，使得客户端存储数据的需要越来越多。最简单且兼容性最佳的存储数据方式是cookies，在HTML4中普遍应用。但cookies也存在不足，存储数据的大小限制在4KB，存储空间狭小；随HTTP请求一起发送，占用带宽，速度慢且效率不高；操作起来比较烦琐，所有信息要被拼接到一个长字符串里。

HTML5重新提供了一种在客户端本地保存数据的功能，即Web Storage。包含两种的存储类型：Session Storage和Local Storage，都支持在同域下存储5MB1。

Session Storage将数据保存在session对象中。这种存储被称为会话存储，因为只在用户进入网站到关闭浏览器的时间段中保存要求保存的任何数据，网站关闭后，数据被删除。Local Storage是将数据保存在客户端本地的硬件设备中，即使浏览器关闭了，数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。不同的网站，数据存储于不同的区域，且一个网站只能访问其自身的数据。Web Storage保存数据时，数据必须是“键名/键值”的格式，并使用JavaScript来存储和访问数据。

2 留言册分析

留言册设计实现的功能是用户输入留言，单击“添加”按钮时将留言保存到Local Storage中，同时查看以往留言，以及留言的时间日期。单击“删除”可以进行留言清空的操作。

根据基本功能的要求，在页面上需要添加多行文本框控件以方便用户输入留言，还需要两个按钮控件分别实现“添加”和“删除”的功能。最后需要显示以往的留言数据和留言的时间，初步确定以表格方式显示。所以，初步分析，留言册的实现需要这样的几个步骤：1）在页面中放置留言册所需的各种控件；2）设计实现留言册的功能。除此之外，还要注意，浏览器是否支持Web Storage。

3 具体实现

3.1 测试浏览器是否支持Web Storage

Web Storage在各大主流浏览器中都得到支持了，但考慮到兼容老版本的浏览器，还要检查一下是否可以使用这项技术。可以通过检查Storage对象是否存在的方式来进行，即typeof（Storage）！=”undefined”。

3.2 实现留言本页面效果

首先用HTML代码实现网页中的留言册涉及的各种控件。考虑到留言册的基本功能，需要使用多行文本框，显示数据用的表格，以及“添加”与“清除”按钮，通过单击“添加”按钮来保存数据，单击“清除”按钮来清除以往的全部数据。

3.3 保存数据

在Javascript脚本中，编写单击按钮时调用的函数，将得到的时间作为键名，并将文本框中的数据作为键值保存。完毕后，重新调用脚本中的loadStorage 函数在页面上显示保存后的数据。关键代码是：

var data = document.getElementById（id）.value；

var time = new Date（）.getTime（）；

localStorage.setItem（time，data）；

（下转第77页）

（上接第72页）

3.4 显示数据

以表格方式显示数据，需要用到loadStorage的两个属性length和key（index），length表示获取所有保存在loadStorage中的数据的条数，key（index）表示将想要得到数据的索引号作为index参数传入，可以得到loadStorage中与这个索引号对应的数据。使用循环获取保存在loadStorage中的数据。关键代码如下：

for（var i = 0；i < localStorage.length；i++）

{ var key = localStorage.key（i）；

var value = localStorage.getItem（key）；

var date = new Date（）；

date.setTime（key）；

var datestr = date.toGMTString（）；

}

3.5 清除数据

调用clearStorage函数对数据进行全部清除。

4 总结

Web Storage为每个域提供了独立的存储空间，不会造成数据混乱；存储空间更大；存储内容不会发送到服务器，不与服务器发生任何交互，节省了带宽；提供了更加丰富的接口；数据操作更加简便。

参考文献：