整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

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

          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

          <script type="text/javascript">localStorage.lastname="Smith";document.write(localStorage.lastname);</script>

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

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

          <script type="text/javascript">if (localStorage.pagecount)

          ?{

          ?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)這條路上不再孤單!


          主站蜘蛛池模板: 亚洲色偷精品一区二区三区| 国产一区二区在线视频| 国产一区二区视频免费| 一区二区在线视频| 国产A∨国片精品一区二区| 日韩一区二区视频在线观看 | 精品少妇一区二区三区在线 | 国产精品无码一区二区在线观一 | 日本视频一区在线观看免费| 久久精品综合一区二区三区| 无码人妻啪啪一区二区| 99精品一区二区免费视频| 亚洲国产激情一区二区三区| 精品久久久久久中文字幕一区| 中文激情在线一区二区| 无码一区二区三区| 国产成人精品一区二区秒拍| 成人精品视频一区二区三区| 一区二区三区杨幂在线观看| 国产一区韩国女主播| 日韩在线视频一区二区三区| 女同一区二区在线观看| 国产成人精品一区二区A片带套| 亚洲综合一区二区三区四区五区| 久久伊人精品一区二区三区| 亚洲一区二区三区无码国产| 精品国产一区二区三区四区| 精品亚洲AV无码一区二区| 国产一区二区三区韩国女主播| 国产精品自拍一区| 无码人妻aⅴ一区二区三区有奶水| 亚洲AV无码一区二区大桥未久| 无码人妻精品一区二区蜜桃 | 国产伦理一区二区三区| 国产一区二区三区电影| 一区二区三区精品高清视频免费在线播放| 高清在线一区二区| AV天堂午夜精品一区| 国产主播一区二区| 国产香蕉一区二区精品视频 | 无码日韩人妻AV一区二区三区|