HTML5本地化應(yīng)用開發(fā)-HTML5 Web存儲詳解

章不是簡單的的Ctrl C與V，而是一個字一個標(biāo)點符號慢慢寫出來的。我認(rèn)為這才是是對讀者的負(fù)責(zé)，本教程由技術(shù)愛好者成笑笑(博客：http://www.chengxiaoxiao.com/)寫作完成。如有轉(zhuǎn)載，請聲明出處。

介紹

我們把數(shù)據(jù)存儲在瀏覽器，一直使用的Cookie，但其實Cookie是有很多數(shù)量和大小的限制的。現(xiàn)在我們不用考慮這些了，我們將要學(xué)習(xí)一種基于HTML5的新技術(shù)Web存儲。來解決這個問題。

背景

雖然Web存儲已經(jīng)有了自己的規(guī)范（(http://dev.w3.org/html5/webstorage/) ），并且也在獨立于Html5進行開發(fā)。但Web存儲通常是集中在HTML5技術(shù)之下的。

不像cookie一樣，數(shù)據(jù)存儲在Web Storage意味著客戶端不在請求服務(wù)器了。通常情況下，在瀏覽器和服務(wù)器來回的傳遞數(shù)據(jù)用的是HTTP request，這限制了如果要在客戶端存儲大量數(shù)據(jù)，必須使用Cookie，但是如果服務(wù)器端用不到Cookie。而在請求時，也會把Cookie發(fā)送到服務(wù)器，浪費了大量帶寬。并且瀏覽器強制限制了Cookie的大小和數(shù)量，在一個相同的域名上，你可以存儲不多于50個cookie和4KB的大小。

使用Web Stroage就會解決以上兩個問題。首先，它不會離開瀏覽器，其次，也允許存儲更多更大的數(shù)據(jù)。W3C推薦限制在5MB之內(nèi)，但是如果用戶需要更多的存儲，是可以在瀏覽器中進行設(shè)置的。當(dāng)前一般瀏覽器會允2MB的容量。

還有另外一種存儲方式就是FileSystem API (www.w3.org/TR/file-system-api/)。簡單來水就是使用此api可以進行文件的讀寫操作，目前來說谷歌瀏覽器是當(dāng)前兼容此功能的。

當(dāng)然如果你對數(shù)據(jù)庫感興趣的話，你可以看一下IndexedDB API (www.w3.org/TR/IndexedDB/)，這個api提供了可以存儲大量存儲內(nèi)容數(shù)據(jù)的能力。目前為止，只有火狐、谷歌、IE10以上支持。

使用Web Storage

Web Storage主要包括本地存儲和基于Session的存儲。它是在域名之上的。如果你不刪除這些存儲，它是會一直存在的。

如果你想添加和修改數(shù)據(jù)，使用下面的Api：

localStorage.setItem(“mydata”,”this is a data”);

獲取數(shù)據(jù)：var dat=localStorage.getItem(“mydata”);

當(dāng)然下面的形式也可以使用的：

第一種：

var data=localStorage["myData"];

localStorage["mydata"]=“this is a data”;

第二種：

var data=localStorage.mydata;

localStorage.mydata=“this is a data”;

刪除數(shù)據(jù):

刪除指定名稱的數(shù)據(jù):localStorage.removeItem(‘mydata’);

刪除所有Web Storage中的數(shù)據(jù):localStorage.clear();

可以存儲的數(shù)據(jù)類型

Web Storage只能夠存取字符串?dāng)?shù)據(jù)，所以如果你想存取更多的數(shù)據(jù)的話，你可以使用json對象，把它轉(zhuǎn)換為json字符串。

var data={“key”:”value”,”key1″:”value1″};

localStorage.setItem(“mydata”,JSON.stringify(data));

當(dāng)你需要讀取數(shù)據(jù)的時候可以把json解析成對象：

var data=JSON.parse(localStorage.mydata);

WebStorage的數(shù)量:localStorage.length.

獲取索引的鍵：

var key=localStorage.key(0);//獲取索引為0的鍵

var data=localStoragegetItem(key);獲取值

通過循環(huán)我們就可以查找到存儲的所有鍵值對了。

sessionStorage和localStorage有相同的api。不同的是SessionStorage是基于會話級別的。

微信號：net4k8k（做(4k+8k)+月薪的程序員）

微信名稱：net知識分享

介紹：主要以發(fā)布和分享.Net和安卓文章為主，爭做全棧開發(fā)工程師，愛學(xué)習(xí)，愛挑戰(zhàn)，愛編程。

打造C#入門教程。總結(jié)自己已經(jīng)習(xí)得的技術(shù)體系。分享到網(wǎng)絡(luò)。為中國的軟件復(fù)興貢獻自己的一份力。

如有不恰當(dāng)之處，還請指正。

作者：成笑笑

職業(yè)：應(yīng)屆畢業(yè)生，找工作中。

本人聯(lián)系方式：cxx@chengxiaoxiao.com

GitHub：https://github.com/shellcheng

My CnBlogs:http://www.cnblogs.com/happpytoo/

ocalstorage本地存儲基本用法

如何創(chuàng)建和訪問 localStorage

上面就創(chuàng)建了一個localStorage。

我們再來做一個刷新頁面，增加訪問次數(shù)的功能！很簡單，代碼如下：

?localStorage.pagecount=Number(localStorage.pagecount) +1;

?}else

?localStorage.pagecount=1;

?}document.write("Visits "+ localStorage.pagecount + " time(s).");</script>

上面是用點的方式進行操作，localStorage還有存儲API,具體如下：

調(diào)用setItem()方法，將對應(yīng)的名字和值傳遞出去，可以實現(xiàn)數(shù)據(jù)存儲
調(diào)用getItem()方法，將名字傳遞出去，可以獲取對應(yīng)的值
調(diào)用removeItem()方法，名稱作為參數(shù)，可以刪除對應(yīng)的數(shù)據(jù)
調(diào)用clear()方法，可以刪除所有存儲的數(shù)據(jù)
使用length屬性以及key()方法，傳入0~length-1的數(shù)字，可以枚舉所有存儲數(shù)據(jù)的名字

用法如下：

localStorage.setItem("name", "haorooms"); ? ?// 以"name"為名字存儲一個字符串localStorage.getItem("name"); ? ? ? ? ? ?// 獲取"name"的值// 枚舉所有存儲的名字/值對for(var i=0; i<localStorage.length; i++){ ? ? ? ?// length表示所有的名值對總數(shù)

? ?var name=localStorage.key(i); ? ? ? ? ? ?// 獲取第i對的名字

? ?var value=localStorage.getItem(name); ? ? ? ?// 獲取該對的值}localStorage.removeItem("name"); ? ? ? ?// 刪除"name"項localAStorage.clear(); ? ? ? ? ? ? ? ?// 全部刪除

sessionStorage和Localstorage區(qū)別

sessionStorage用法和Localstorage用法一樣，區(qū)別就是，sessionStorage是會話存儲，關(guān)閉瀏覽器，存儲內(nèi)容就會被清除。

低版本瀏覽器存儲兼容方案

IE User Data

微軟在IE5及之后的IE瀏覽器中實現(xiàn)了它專屬的客戶端存儲機制——“userData”。

userData可以實現(xiàn)一定量的字符串?dāng)?shù)據(jù)存儲，對于IE8以前的IE瀏覽器中，可以將其用作是Web存儲的替代方案。

iLocalStorage插件

由于IE8以下瀏覽器的本地存儲API不一樣，所以就寫了個插件兼容各大瀏覽器存儲。提供的方法及用法如下：

getItem: 獲取屬性setItem: 設(shè)置屬性removeItem: 刪除屬性iLocalStorage.setItem('key', 'value');console.log(iLocalStorage.getItem('key'));iLocalStorage.removeItem('key');

插件代碼

/**

* LocalStorage 本地存儲兼容函數(shù)

* getItem: 獲取屬性

* setItem: 設(shè)置屬性

* removeItem: 刪除屬性

* @example

? ?iLocalStorage.setItem('key', 'value');

? ?console.log(iLocalStorage.getItem('key'));

? ?iLocalStorage.removeItem('key');

*/(function(window, document){

? ?// 1. IE7下的UserData對象

? ?var UserData={

? ? ? ?userData: null,

? ? ? ?name: location.href,

? ? ? ?init: function(){

? ? ? ? ? ?// IE7下的初始化

? ? ? ? ? ?if(!UserData.userData){

? ? ? ? ? ? ? ?try{

? ? ? ? ? ? ? ? ? ?UserData.userData=document.createElement("INPUT");

? ? ? ? ? ? ? ? ? ?UserData.userData.type="hidden";

? ? ? ? ? ? ? ? ? ?UserData.userData.style.display="none";

? ? ? ? ? ? ? ? ? ?UserData.userData.addBehavior("#default#userData");

? ? ? ? ? ? ? ? ? ?document.body.appendChild(UserData.userData);

? ? ? ? ? ? ? ? ? ?var expires=new Date();

? ? ? ? ? ? ? ? ? ?expires.setDate(expires.getDate() + 365);

? ? ? ? ? ? ? ? ? ?UserData.userData.expires=expires.toUTCString();

? ? ? ? ? ? ? ?} catch(e){

? ? ? ? ? ? ? ? ? ?return false;

? ? ? ? ? ? ? ?}

? ? ? ? ? ?}

? ? ? ? ? ?return true;

? ? ? ?},

? ? ? ?setItem: function(key, value){

? ? ? ? ? ?if(UserData.init()){

? ? ? ? ? ? ? ?UserData.userData.load(UserData.name);

? ? ? ? ? ? ? ?UserData.userData.setAttribute(key, value);

? ? ? ? ? ? ? ?UserData.userData.save(UserData.name);

? ? ? ? ? ?}

? ? ? ?},

? ? ? ?getItem: function(key){

? ? ? ? ? ?if(UserData.init()){

? ? ? ? ? ? ? ?UserData.userData.load(UserData.name);

? ? ? ? ? ? ? ?return UserData.userData.getAttribute(key);

? ? ? ? ? ?}

? ? ? ?},

? ? ? ?removeItem: function(key){

? ? ? ? ? ?if(UserData.init()){

? ? ? ? ? ? ? ?UserData.userData.load(UserData.name);

? ? ? ? ? ? ? ?UserData.userData.removeAttribute(key);

? ? ? ? ? ? ? ?UserData.userData.save(UserData.name);

? ? ? ? ? ?}

? ? ? ?}

? ?};

? ?// 2. 兼容只支持globalStorage的瀏覽器

? ?// 使用： var storage=getLocalStorage();

? ?function getLocalStorage(){

? ? ? ?if(typeof localStorage=="object"){

? ? ? ? ? ?return localStorage;

? ? ? ?} else if(typeof globalStorage=="object"){

? ? ? ? ? ?return globalStorage[location.href];

? ? ? ?} else if(typeof userData=="object"){

? ? ? ? ? ?return globalStorage[location.href];

? ? ? ?} else{

? ? ? ? ? ?throw new Error("不支持本地存儲");

? ? ? ?}

? ?}

? ?var storage=getLocalStorage();

? ?function iLocalStorage(){

? ?}

? ?// 高級瀏覽器的LocalStorage對象

? ?iLocalStorage.prototype={

? ? ? ?setItem: function(key, value){

? ? ? ? ? ?if(!window.localStorage){

? ? ? ? ? ? ? ?UserData.setItem(key, value);

? ? ? ? ? ?}else{

? ? ? ? ? ? ? ?storage.setItem(key, value);

? ? ? ? ? ?}

? ? ? ?},

? ? ? ?getItem: function(key){

? ? ? ? ? ?if(!window.localStorage){

? ? ? ? ? ? ? ?return UserData.getItem(key);

? ? ? ? ? ?}else{

? ? ? ? ? ? ? ?return storage.getItem(key);

? ? ? ? ? ?}

? ? ? ?},

? ? ? ?removeItem: function(key){

? ? ? ? ? ?if(!window.localStorage){

? ? ? ? ? ? ? ?UserData.removeItem(key);

? ? ? ? ? ?}else{

? ? ? ? ? ? ? ?storage.removeItem(key);

? ? ? ? ? ?}

? ? ? ?}

? ?}

? ?if (typeof module=='object') {

? ? ? ?module.exports=new iLocalStorage();

? ?}else {

? ? ? ?window.iLocalStorage=new iLocalStorage();

? ?}})(window, document);

其他插件

localForage：https://github.com/mozilla/localForage

store.js：https://github.com/marcuswestin/store.js

------------------

切圖網(wǎng)（qietu.com）是一家專門從事html5前端開發(fā)的服務(wù)機構(gòu)，長期致力于提供高品質(zhì)的psd轉(zhuǎn)html5、響應(yīng)式切圖、webapp切圖，h5切圖等web前端開發(fā)服務(wù)。

專注web前端開發(fā)技術(shù)，關(guān)注用戶體驗，加我們公眾微信賬號：qietuwang（長按復(fù)制）

TML5引入了一種新的Web存儲機制，它允許我們在瀏覽器中持久保存數(shù)據(jù)，而無需依賴于傳統(tǒng)的Cookie或服務(wù)器端存儲。這種新方法提供了更簡單、更高效的方式來處理客戶端數(shù)據(jù)，并且在離線狀態(tài)下也能正常工作。以下是一些常用的HTML5 Web存儲技術(shù)及其代碼示例：

1. 本地存儲（LocalStorage）

本地存儲允許我們在瀏覽器中存儲鍵值對數(shù)據(jù)，并且這些數(shù)據(jù)會一直保留，直到我們顯式地刪除它們。以下是一個使用本地存儲保存用戶偏好設(shè)置的示例代碼：

```html

<script>
// 存儲用戶偏好設(shè)置
localStorage.setItem('theme', 'dark');

// 獲取用戶偏好設(shè)置
var theme=localStorage.getItem('theme');
</script>

```

2. 會話存儲（SessionStorage）

會話存儲與本地存儲類似，但是存儲的數(shù)據(jù)只在會話期間有效，一旦會話結(jié)束或瀏覽器關(guān)閉，存儲的數(shù)據(jù)就會被清除。以下是一個使用會話存儲保存用戶登錄狀態(tài)的示例代碼：

```html

<script>
// 存儲用戶登錄狀態(tài)
sessionStorage.setItem('loggedIn', 'true');

// 檢查用戶登錄狀態(tài)
var loggedIn=sessionStorage.getItem('loggedIn');
</script>

```

3. 離線存儲（Offline Storage）

離線存儲允許我們在瀏覽器中緩存網(wǎng)頁的資源，使得用戶在離線狀態(tài)下仍然可以訪問和瀏覽已緩存的頁面。以下是一個使用離線存儲緩存網(wǎng)頁資源的示例代碼：

```html

<!DOCTYPE html>
<html manifest="offline.appcache">
<body>
<!-- 網(wǎng)頁內(nèi)容 -->
</body>
</html>

```

4. IndexedDB

IndexedDB是一個基于鍵值對的數(shù)據(jù)庫系統(tǒng)，它允許我們在瀏覽器中存儲和檢索結(jié)構(gòu)化數(shù)據(jù)。以下是一個使用IndexedDB存儲用戶數(shù)據(jù)的示例代碼：

```html

<script>
// 打開數(shù)據(jù)庫
var request=window.indexedDB.open('myDatabase', 1);

// 創(chuàng)建對象存儲空間
request.onupgradeneeded=function(event) {
var db=event.target.result;
var objectStore=db.createObjectStore('users', { keyPath: 'id' });
};

// 存儲用戶數(shù)據(jù)

request.onsuccess=function(event) {
var db=event.target.result;
var transaction=db.transaction('users', 'readwrite');
var objectStore=transaction.objectStore('users');

var user={ id: 1, name: 'John Doe', email: 'john@example.com' };
var request=objectStore.add(user);
};
</script>

```

通過使用這些HTML5 Web存儲技術(shù)，我們可以更靈活地處理客戶端數(shù)據(jù)，并且提供更好的用戶體驗。無論是存儲用戶偏好設(shè)置、管理用戶登錄狀態(tài)，還是實現(xiàn)離線訪問，這些新方法都為我們提供了更多的選擇和便利。記住，在使用HTML5 Web存儲時，要根據(jù)需求選擇適當(dāng)?shù)募夹g(shù)，并合理管理存儲的數(shù)據(jù)。

我是永不低頭的熊，喜歡美食、健身，當(dāng)然也喜歡寫代碼，每天不定時更新各類編程相關(guān)的文章，希望你在碼農(nóng)這條路上不再孤單！

在線咨詢

上一篇：2024 年，你應(yīng)該知道的 5 種 React 設(shè)計
下一篇：網(wǎng)頁設(shè)計軟件！！！

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML5本地化應(yīng)用開發(fā)-HTML5 Web存儲詳解

您的項目需求