淺談移動(dòng)項(xiàng)目的本地存儲(chǔ)

黃華林

摘要：介紹了Html5本地存儲(chǔ)的相關(guān)概念，以及Html5本地存儲(chǔ)的一些特性和操作本地存儲(chǔ)的API，通過(guò)本地存儲(chǔ)的典型應(yīng)用場(chǎng)景來(lái)示范本地儲(chǔ)存的使用，說(shuō)明了移動(dòng)項(xiàng)目中使用本地存儲(chǔ)的優(yōu)勢(shì)，給移動(dòng)應(yīng)用開(kāi)發(fā)工程師提供了指導(dǎo)和借鑒意義。

關(guān)鍵詞：本地存儲(chǔ)：Localstorage；Html5；移動(dòng)應(yīng)用

中圖分類(lèi)號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2015）19-0049-03

據(jù)報(bào)道，2014年底全球智能手機(jī)應(yīng)用訂閱總量或?qū)⒊饺蚩側(cè)丝冢苿?dòng)應(yīng)用似乎已經(jīng)成為人們生活密不可分的一部分。排除那些還沒(méi)普及智能手機(jī)的國(guó)家與地區(qū)，簡(jiǎn)單計(jì)算，幾乎平均每位用戶的智能手機(jī)上都安裝著1個(gè)以上的應(yīng)用程序：社交、餐飲、交通、租住、旅游、購(gòu)物……眾所周知，隨著html5的普及，越來(lái)越多的移動(dòng)應(yīng)用朝著傳統(tǒng)網(wǎng)頁(yè)的運(yùn)行模式發(fā)展，這些應(yīng)用時(shí)不時(shí)進(jìn)行聯(lián)網(wǎng)，或加載用戶數(shù)據(jù)，或開(kāi)始引用云端存儲(chǔ)用戶進(jìn)度等。但不少業(yè)界認(rèn)為，隨著移動(dòng)應(yīng)用存儲(chǔ)技術(shù)的發(fā)展，本地實(shí)時(shí)存儲(chǔ)將成為最主流的數(shù)據(jù)保存方式。

1HTML5本地存儲(chǔ)Localstorage

在Web的發(fā)展史上，在很長(zhǎng)時(shí)間里Cookies是唯一可以使用的在用戶本地存儲(chǔ)少量數(shù)據(jù)的方法。但Cookies有一些非常明顯的缺陷，限制了它的應(yīng)用：

1）Cookie會(huì)被附加在每個(gè)HTYP請(qǐng)求中，所以無(wú)形中增加了流量，對(duì)移動(dòng)應(yīng)用非常不利。

2）由于在HTTP請(qǐng)求中的Cookie是明文傳遞的，所以安全性成問(wèn)題。

3）Cookie的大小限制在4KB左右，對(duì)于復(fù)雜的存儲(chǔ)需求來(lái)說(shuō)是不夠用的。

移動(dòng)應(yīng)用中，數(shù)據(jù)都由Server端提供，但移動(dòng)應(yīng)用一般都會(huì)支持offline使用模式，因此需要移動(dòng)客戶端本地存儲(chǔ)數(shù)據(jù)。HTML5的本地存儲(chǔ)能夠很好地解決問(wèn)題。簡(jiǎn)單來(lái)說(shuō)，HTML5的本地存儲(chǔ)就是一種讓網(wǎng)頁(yè)可以把鍵值對(duì)存儲(chǔ)在瀏覽器客戶端的方法。像Cookie一樣，這些數(shù)據(jù)不會(huì)因?yàn)橛脩舸蜷_(kāi)新網(wǎng)站，刷新頁(yè)面，乃至關(guān)閉瀏覽器而消失。而與Cookie不同的是，這些數(shù)據(jù)不會(huì)每次隨著HTTP請(qǐng)求被發(fā)送到服務(wù)器端，這是HTML5規(guī)范的一部分，Html5使用JavaScript來(lái)存儲(chǔ)和訪問(wèn)數(shù)據(jù)。這一接口會(huì)被瀏覽器原生支持，不用依賴任何第三方插件。

1.1HTML5本地存儲(chǔ)的一些特性

1）大小限制在5M，各個(gè)瀏覽器不一致。

2）在隱私模式下不可讀取。

3）本質(zhì)是在讀寫(xiě)文件，數(shù)據(jù)多的話會(huì)比較卡。

4）不能被爬蟲(chóng)爬取，不要用本地存儲(chǔ)完全取代URL傳參。

1.2存儲(chǔ)對(duì)象分類(lèi)

HTML5的本地存儲(chǔ)提供了一種全新的不同于cookie的方式，讓W(xué)eb頁(yè)面在瀏覽器中以鍵值對(duì)的形式在本地存儲(chǔ)數(shù)。本地存儲(chǔ)對(duì)象分為兩種，sessionStorage和localStorage。

sessionStorage：生命周期為當(dāng)前窗口或標(biāo)簽頁(yè)，一旦窗口或標(biāo)簽頁(yè)被永久關(guān)閉了，那么所有通過(guò)sessionStorage存儲(chǔ)的數(shù)據(jù)也就被清空了。

localStorage：將數(shù)據(jù)保存在客戶端硬件設(shè)備上，生命周期是永久，這意味著除非用戶顯示在瀏覽器提供的UI上清除lo-calStorage信息，否則這些信息將永遠(yuǎn)存在。

不同瀏覽器無(wú)法共享localStorage或sessionStorage中的信息。相同瀏覽器的不同頁(yè)面間可以共享相同的localStorage（頁(yè)面屬于相同域名和端口），但是不同頁(yè)面或標(biāo)簽頁(yè)間無(wú)法共享sessionStorage的信息。

localStorage和sessionStorage一樣都是用來(lái)存儲(chǔ)客戶端臨時(shí)信息的對(duì)象，兩者區(qū)別就是一個(gè)作為臨時(shí)保存，一個(gè)長(zhǎng)期保存。

1.3本地存儲(chǔ)的操作示范

localStorage和sessionStorage的用法基本上相同，這里以lo-calStorage為例作代碼示范。

1）檢查瀏覽器是否支持本地存儲(chǔ)

2）本地存儲(chǔ)數(shù)據(jù)的操作

存儲(chǔ)數(shù)據(jù)的方法就是直接給window.localStorage添加一個(gè)屬性，例如：window.localStorage.attr_a或者window.localStorage["attr_a"]。屬性的讀取、寫(xiě)入、刪除操作方法很簡(jiǎn)單，是以鍵值對(duì)的方式存在的，常見(jiàn)操作如下：

利用這些簡(jiǎn)單的本地存儲(chǔ)操作的API，可以完成大量任務(wù)，比如說(shuō)個(gè)性化或跟蹤用戶行為，這些對(duì)移動(dòng)應(yīng)用開(kāi)發(fā)人員來(lái)說(shuō)是重要的設(shè)計(jì)任務(wù)。但是，本地存儲(chǔ)還有一個(gè)更為重要的應(yīng)用場(chǎng)景：高速緩存。利用本地存儲(chǔ)，移動(dòng)客戶端可以很容易地從服務(wù)器高速緩存數(shù)據(jù)，讓用戶無(wú)需等待緩慢的服務(wù)器回調(diào)，并且最小化了對(duì)服務(wù)器上數(shù)據(jù)的需求量。

2移動(dòng)項(xiàng)目中本地存儲(chǔ)的應(yīng)用

用戶使用移動(dòng)應(yīng)用最多的操作之一是購(gòu)買(mǎi)某項(xiàng)服務(wù)或產(chǎn)品，移動(dòng)應(yīng)用中虛擬購(gòu)物車(chē)的數(shù)據(jù)存儲(chǔ)是本地存儲(chǔ)的典型應(yīng)用場(chǎng)景。

2.1虛擬購(gòu)物車(chē)的需求分析

虛擬購(gòu)物車(chē)的本質(zhì)就是一個(gè)意向訂單，含有用戶信息和該用戶的意向商品的信息。典型的虛擬購(gòu)物車(chē)基本需求如下：

1）虛擬購(gòu)物車(chē)記錄用戶意向商品的相關(guān)信息，如商品編號(hào)、名稱、單價(jià)、數(shù)量等。主要功能是添加、刪除、修改意向商品信息。

2）添加商品到購(gòu)物車(chē)時(shí)，若商品已存在于購(gòu)物車(chē)中，則該商品數(shù)量相應(yīng)增加，否則直接記入。

3）刪除購(gòu)物車(chē)中的商品。

4）修改購(gòu)物車(chē)中商品的數(shù)量，可增可減，當(dāng)數(shù)量減少為0時(shí)，即可從購(gòu)物車(chē)中刪除該商品。

2.2基于本地存儲(chǔ)的購(gòu)物車(chē)實(shí)現(xiàn)

由于商品對(duì)象信息最終以字符串信息進(jìn)行本地存儲(chǔ)，需要引入JSON庫(kù)，來(lái)處理商品對(duì)象與商品對(duì)象字符串之間的轉(zhuǎn)換。在如下的JavaScript代碼中，myLS對(duì)象操作本地儲(chǔ)存，用本地存儲(chǔ)記錄購(gòu)物車(chē)信息（"myCaft"鍵）。product是商品類(lèi)，shop_cart是購(gòu)物車(chē)類(lèi)，shop_cart內(nèi)部實(shí)現(xiàn)了商品信息的添加、刪除、修改。基于本地存儲(chǔ)的購(gòu)物車(chē)的實(shí)現(xiàn)代碼如下：

3結(jié)束語(yǔ)

Html5的本地存儲(chǔ)給移動(dòng)Web App開(kāi)發(fā)人員提供了巨大的客戶端存儲(chǔ)空間，擺脫了Cookie模式下的限制，開(kāi)啟了數(shù)據(jù)的本地高速緩存，振奮人心。Html5的本地存儲(chǔ)將大大改善移動(dòng)應(yīng)用的性能，并能實(shí)現(xiàn)移動(dòng)應(yīng)用的離線使用，極大的提高用戶體驗(yàn)，這正是移動(dòng)應(yīng)用開(kāi)發(fā)人員所努力追求的。