基于Web Storage設計的留言冊

王炳鵬

摘要：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為每個域提供了獨立的存儲空間，不會造成數據混亂；存儲空間更大；存儲內容不會發送到服務器，不與服務器發生任何交互，節省了帶寬；提供了更加豐富的接口；數據操作更加簡便。

參考文獻：

[1] 馮永亮.HTML5本地數據存儲技術研究[J].西安文理學院學報：自然科學版，2014，17（3）：66-69.

【通聯編輯：光文玲】