HTML5 LocalStorage本地存儲和sessionStorage使用

時間 2019-11-09

標籤 html5 html localstorage 本地存儲 sessionstorage 使用欄目 HTML5 简体版

原文原文鏈接

用過HTML5 LocalStorage本地存儲和sessionStorage的，你就感受html5很強大，比cookie和session好用不少，下面讓咱們來學習這個知識吧...javascript

最先的Cookies天然是你們都知道，問題主要就是過小，大概也就4KB的樣子，並且IE6只支持每一個域名20個cookies，太少了。優點就是你們都支持，並且支持得還蠻好。很早之前那些禁用cookies的用戶也都慢慢的不存在了，就好像之前禁用javascript的用戶不存在了同樣。html

首先天然是檢測瀏覽器是否支持本地存儲。在HTML5中，本地存儲是一個window的屬性，包括localStorage和sessionStorage，從名字應該能夠很清楚的辨認兩者的區別，前者是一直存在本地的，後者只是伴隨着session，窗口一旦關閉就沒了。兩者用法徹底相同，這裏以localStorage爲例。html5

if(window.localStorage){
alert('This browser supports localStorage');
}else{
alert('This browser does NOT support localStorage');
}java

存儲數據的方法就是直接給window.localStorage添加一個屬性，例如：window.localStorage.a 或者 window.localStorage["a"]。它的讀取、寫、刪除操做方法很簡單，是以鍵值對的方式存在的，以下：瀏覽器

localStorage.a = 3;//設置a爲"3"
localStorage["a"] = "sfsf";//設置a爲"sfsf"，覆蓋上面的值
localStorage.setItem("b","isaac");//設置b爲"isaac"
var a1 = localStorage["a"];//獲取a的值
var a2 = localStorage.a;//獲取a的值
var b = localStorage.getItem("b");//獲取b的值
localStorage.removeItem("c");//清除c的值cookie

這裏最推薦使用的天然是getItem()和setItem()，清除鍵值對使用removeItem()。若是但願一次性清除全部的鍵值對，可使用clear()。另外，HTML5還提供了一個key()方法，能夠在不知道有哪些鍵值的時候使用，以下：session

var storage = window.localStorage;
function showStorage(){
for(var i=0;i<storage.length;i++){
//key(i)得到相應的鍵，再用getItem()方法得到對應的值
document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
}
}函數

須要注意的是，HTML5本地存儲只能存字符串，任何格式存儲的時候都會被自動轉爲字符串，因此讀取的時候，須要本身進行類型的轉換。這也就是上一段代碼中parseInt必需要使用的緣由。學習

另外，在iPhone/iPad上有時設置setItem()時會出現詭異的QUOTA_EXCEEDED_ERR錯誤，這時通常在setItem以前，先removeItem()就ok了。測試

HTML5的本地存儲，還提供了一個storage事件，能夠對鍵值對的改變進行監聽，使用方法以下：

if(window.addEventListener){
window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
if(!e){e=window.event;}
//showStorage();
}

對於事件變量e，是一個StorageEvent對象，提供了一些實用的屬性，能夠很好的觀察鍵值對的變化，以下表：

Property	Type	Description
key	String	The named key that was added, removed, or moddified
oldValue	Any	The previous value(now overwritten), or null if a new item was added
newValue	Any	The new value, or null if an item was added
url/uri	String	The page that called the method that triggered this change

這裏添加兩個鍵值對a和b，並增長一個按鈕。給a設置固定的值，當點擊按鈕時，修改b的值：

<body>
<p>You have viewed this page <span id="count">0</span>  time(s).</p>
<p><input type="button" value="changeStorage" onClick="changeS()"/></p>
<script>
var storage = window.localStorage;
if (!storage.getItem("pageLoadCount")) storage.setItem("pageLoadCount",0);
storage.pageLoadCount = parseInt(storage.getItem("pageLoadCount")) + 1;//必須格式轉換
document.getElementByIdx_x("count").innerHTML = storage.pageLoadCount;
showStorage();
if(window.addEventListener){
window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
if(!e){e=window.event;}
showObject(e);
}
function showObject(obj){
//遞歸顯示object
if(!obj){return;}
for(var i in obj){
  if(typeof(obj[i])!="object" || obj[i]==null){
   document.write(i + " : " + obj[i] + "<br/>");
  }else{
   document.write(i + " : object" + "<br/>");
  }
}
}
storage.setItem("a",5);
function changeS(){
//修改一個鍵值，測試storage事件
if(!storage.getItem("b")){storage.setItem("b",0);}
storage.setItem('b',parseInt(storage.getItem('b'))+1);
}
function showStorage(){
//循環顯示localStorage裏的鍵值對
for(var i=0;i<storage.length;i++){
  //key(i)得到相應的鍵，再用getItem()方法得到對應的值
  document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
}
}
</script>
</body>

sessionStorage和上文中提到的localStorage很是相識，方法也幾乎同樣：

很是通俗易懂的接口:

sessionStorage.getItem(key):獲取指定key本地存儲的值
sessionStorage.setItem(key,value)：將value存儲到key字段
sessionStorage.removeItem(key):刪除指定key本地存儲的值
sessionStorage.length是sessionStorage的項目數

sessionStorage與 localStorage 的異同

sessionStorage 和 localStorage 就一個不一樣的地方， sessionStorage數據的存儲僅特定於某個會話中，也就是說數據只保持到瀏覽器關閉，當瀏覽器關閉後從新打開這個頁面時，以前的存儲已經被清除。而 localStorage 是一個持久化的存儲，它並不侷限於會話。

sessionStorage和localStorage提供的key()和length能夠方便的實現存儲的數據遍歷，例以下面的代碼：

`1`	`var` `storage = window.localStorage;`

`2`	`for` `(var` `i=0, len = storage.length; i < len; i++){`

`3`	`var` `key = storage.key(i);`

`4`	`var` `value = storage.getItem(key);`

`5`	`console.log(key +` `"="` `+ value);`

6 }

sessionStorage 和 localStorage的clear()函數的用於清空同源的本地存儲數據，好比localStorage.clear()，它將刪除全部同源的本地存儲的localStorage數據，而對於Session Storage，它只清空當前會話存儲的數據。

關閉頁面會致使 sessionStorage 的數據被清除，但刷新或從新打開新頁面數據仍是存在，若是須要存儲的只是少許的臨時數據。咱們可使用sessionStorage 。或者作頁面間的小交互。

sessionStorage 和 localStorage具備相同的方法storage事件，在存儲事件的處理函數中是不能取消這個存儲動做的。存儲事件只是瀏覽器在數據變化發生以後給你的一個通知。當setItem(),removeItem()或者clear() 方法被調用，而且數據真的發生了改變時，storage事件就會被觸發。注意這裏的的條件是數據真的發生了變化。也就是說，若是當前的存儲區域是空的，你再去調用clear()是不會觸發事件的。或者你經過setItem()來設置一個與現有值相同的值，事件也是不會觸發的。當存儲區域發生改變時就會被觸發，這其中包含許多有用的屬性：

storageArea: 表示存儲類型（Session或Local）
key:發生改變項的key
oldValue: key的原值
newValue: key的新值
url*: key改變發生的URL
* 注意: url 屬性早期的規範中爲uri屬性。有些瀏覽器發佈較早，沒有包含這一變動。爲兼容性考慮，使用url屬性前，你應該先檢查它是否存在，若是沒有url屬性，則應該使用uri屬性若是調用clear()方法，那麼key、oldValue和newValue都會被設置爲null。