基于Web Storage設(shè)計(jì)的留言?xún)?cè)

王炳鵬

摘要：HTML4的存儲(chǔ)機(jī)制是利用cookies進(jìn)行，但cookies存儲(chǔ)機(jī)制存在很多缺點(diǎn)，HTML5轉(zhuǎn)而使用Web Storage存儲(chǔ)機(jī)制。本文利用Web Storage設(shè)計(jì)實(shí)現(xiàn)一個(gè)留言?xún)?cè)。

關(guān)鍵詞：HTML5；Web Storage；Local Storage

中圖分類(lèi)號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：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應(yīng)用的飛速發(fā)展，使得客戶端存儲(chǔ)數(shù)據(jù)的需要越來(lái)越多。最簡(jiǎn)單且兼容性最佳的存儲(chǔ)數(shù)據(jù)方式是cookies，在HTML4中普遍應(yīng)用。但cookies也存在不足，存儲(chǔ)數(shù)據(jù)的大小限制在4KB，存儲(chǔ)空間狹?。浑SHTTP請(qǐng)求一起發(fā)送，占用帶寬，速度慢且效率不高；操作起來(lái)比較煩瑣，所有信息要被拼接到一個(gè)長(zhǎng)字符串里。

HTML5重新提供了一種在客戶端本地保存數(shù)據(jù)的功能，即Web Storage。包含兩種的存儲(chǔ)類(lèi)型：Session Storage和Local Storage，都支持在同域下存儲(chǔ)5MB1。

Session Storage將數(shù)據(jù)保存在session對(duì)象中。這種存儲(chǔ)被稱(chēng)為會(huì)話存儲(chǔ)，因?yàn)橹辉谟脩暨M(jìn)入網(wǎng)站到關(guān)閉瀏覽器的時(shí)間段中保存要求保存的任何數(shù)據(jù)，網(wǎng)站關(guān)閉后，數(shù)據(jù)被刪除。Local Storage是將數(shù)據(jù)保存在客戶端本地的硬件設(shè)備中，即使瀏覽器關(guān)閉了，數(shù)據(jù)仍然存在，下次打開(kāi)瀏覽器訪問(wèn)網(wǎng)站時(shí)仍然可以繼續(xù)使用。不同的網(wǎng)站，數(shù)據(jù)存儲(chǔ)于不同的區(qū)域，且一個(gè)網(wǎng)站只能訪問(wèn)其自身的數(shù)據(jù)。Web Storage保存數(shù)據(jù)時(shí)，數(shù)據(jù)必須是“鍵名/鍵值”的格式，并使用JavaScript來(lái)存儲(chǔ)和訪問(wèn)數(shù)據(jù)。

2 留言?xún)?cè)分析

留言?xún)?cè)設(shè)計(jì)實(shí)現(xiàn)的功能是用戶輸入留言，單擊“添加”按鈕時(shí)將留言保存到Local Storage中，同時(shí)查看以往留言，以及留言的時(shí)間日期。單擊“刪除”可以進(jìn)行留言清空的操作。

根據(jù)基本功能的要求，在頁(yè)面上需要添加多行文本框控件以方便用戶輸入留言，還需要兩個(gè)按鈕控件分別實(shí)現(xiàn)“添加”和“刪除”的功能。最后需要顯示以往的留言數(shù)據(jù)和留言的時(shí)間，初步確定以表格方式顯示。所以，初步分析，留言?xún)?cè)的實(shí)現(xiàn)需要這樣的幾個(gè)步驟：1）在頁(yè)面中放置留言?xún)?cè)所需的各種控件；2）設(shè)計(jì)實(shí)現(xiàn)留言?xún)?cè)的功能。除此之外，還要注意，瀏覽器是否支持Web Storage。

3 具體實(shí)現(xiàn)

3.1 測(cè)試瀏覽器是否支持Web Storage

Web Storage在各大主流瀏覽器中都得到支持了，但考慮到兼容老版本的瀏覽器，還要檢查一下是否可以使用這項(xiàng)技術(shù)?？梢酝ㄟ^(guò)檢查Storage對(duì)象是否存在的方式來(lái)進(jìn)行，即typeof（Storage）！=”undefined”。

3.2 實(shí)現(xiàn)留言本頁(yè)面效果

首先用HTML代碼實(shí)現(xiàn)網(wǎng)頁(yè)中的留言?xún)?cè)涉及的各種控件。考慮到留言?xún)?cè)的基本功能，需要使用多行文本框，顯示數(shù)據(jù)用的表格，以及“添加”與“清除”按鈕，通過(guò)單擊“添加”按鈕來(lái)保存數(shù)據(jù)，單擊“清除”按鈕來(lái)清除以往的全部數(shù)據(jù)。

3.3 保存數(shù)據(jù)

在Javascript腳本中，編寫(xiě)單擊按鈕時(shí)調(diào)用的函數(shù)，將得到的時(shí)間作為鍵名，并將文本框中的數(shù)據(jù)作為鍵值保存。完畢后，重新調(diào)用腳本中的loadStorage 函數(shù)在頁(yè)面上顯示保存后的數(shù)據(jù)。關(guān)鍵代碼是：

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

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

localStorage.setItem（time，data）；

（下轉(zhuǎn)第77頁(yè)）

（上接第72頁(yè)）

3.4 顯示數(shù)據(jù)

以表格方式顯示數(shù)據(jù)，需要用到loadStorage的兩個(gè)屬性length和key（index），length表示獲取所有保存在loadStorage中的數(shù)據(jù)的條數(shù)，key（index）表示將想要得到數(shù)據(jù)的索引號(hào)作為index參數(shù)傳入，可以得到loadStorage中與這個(gè)索引號(hào)對(duì)應(yīng)的數(shù)據(jù)。使用循環(huán)獲取保存在loadStorage中的數(shù)據(jù)。關(guān)鍵代碼如下：

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 清除數(shù)據(jù)

調(diào)用clearStorage函數(shù)對(duì)數(shù)據(jù)進(jìn)行全部清除。

4 總結(jié)

Web Storage為每個(gè)域提供了獨(dú)立的存儲(chǔ)空間，不會(huì)造成數(shù)據(jù)混亂；存儲(chǔ)空間更大；存儲(chǔ)內(nèi)容不會(huì)發(fā)送到服務(wù)器，不與服務(wù)器發(fā)生任何交互，節(jié)省了帶寬；提供了更加豐富的接口；數(shù)據(jù)操作更加簡(jiǎn)便。

參考文獻(xiàn)：

[1] 馮永亮.HTML5本地?cái)?shù)據(jù)存儲(chǔ)技術(shù)研究[J].西安文理學(xué)院學(xué)報(bào)：自然科學(xué)版，2014，17（3）：66-69.

【通聯(lián)編輯：光文玲】