萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> Javascript使用浏覽器本地存儲功能

Javascript使用浏覽器本地存儲功能

   在日常的操作過程中,在所難免的需要利用Javascript在用戶浏覽器中本地存儲一些數據,以達到一些不能用服務器來識別的功能,如識別用戶的第二次訪問等。常用的方法有cookie,IE浏覽器的userData,以及localStorage等,由於userData只有IE支持,它的可擴展性並不大。

  cookie:

  cookie的好處是用戶每請求一次服務器數據,cookie則會隨著這些請求發送到服務器,服務器腳本語言如PHP等能夠處理cookie發送的數據,可以說是非常方便的。但是它的缺點也顯而易見,除開我們經常說的,浏覽器對cookie數量,大小的限制,我覺得更重要的一點,用js對cookie的操作相當的繁瑣,浏覽器只提供document.cookie這樣一個對象,對cookie的賦值,獲取都比較麻煩而在PHP中,我們可以通過setcookie()來設置cookie,通過$_COOKIE這個超全局數組來獲取cookie。下面是我封裝的Javascript操作和獲取cookie的函數:

  function setcookie(name,value,expired,path,domain){

  var now=new Date();

  if(name==null){

  throw "Cookie Name Must not be Null";

  }else if (value==null){

  throw "Cookie Value Must not be Null";

  }else if(expired==null){

  expired=0;

  }

  if(path==null){

  path="/";

  }

  if(domain==null){

  domain=window.location.host;

  }

  now.setTime(now.getTime()+expired*1000);

  document.cookie=name+"="+escape(value)+";expires="+now.toGMTString()+";path="+path+";domain="+domain;

  }

  function getcookie(name){

  var allcookie=document.cookie;

  thiscookie=allcookie.match(name+"=[^s]*");

  mycookie=thiscookie[0].split("=");

  a=mycookie[1].substring(0,mycookie[1].length-1);

  return unescape(a);

  }

  setcookie()前三個參數是必須,後面的的兩個參數分別代表路徑,有效期。當要刪除一個cookie時候,直接把有效期設置為負值即可。getcookie()函數用來獲取cookie內容,參數為相應cookie的name值。

  從上面的例子可以看到用js訪問和操作cookie是比較麻煩的(相對於php等語言來說);

  localStorage:

  相對於cookie,localStorage的操作可謂方便快捷,它既能像普通對象一樣進行復制操作,也有相應API進行賦值,獲取,刪除,清空等操作,如,我要存儲host值為www.iefans.net,下面的方法均可以:

  localStorage.host="www.iefans.net";

  localStorage['host']="www.iefans.net";

  localStorage.setItem("host","www.iefans.net");

  //獲取

  localStorage.host;

  localStorage['host'];

  localStorage.getItem("host");

  //刪除

  localStorage.removeItem("host");

  //清空locaStorage

  localStorage.clear();

  從上面的例子可以看出,localStorage的操作靈活方便,非常好用。但是它也有一些缺點,第一是不會自動隨請求發到服務器,如果非要發送到的話,必須人工轉化為cookie或者通過ajax的方式發送;第二點是localStorage只有特定的浏覽器才能使用(支持HTML5),而國內一些老舊的浏覽器依然占據著很大的市場,阻礙了localStorage的使用。

copyright © 萬盛學電腦網 all rights reserved