HTML5 localStroage/sessionStorage存儲

在看w3c的教程的時候看到了這個本地localStroage/sessionStorage存儲這個貌似試將cookies單獨分離的出來什麼的不過w3c給的栗子沒有部分的屬性的說明於是就自己查了一些資料加上自己的理解彙總起來

—————————繼續賣萌的分割線

1.說明

localStorage和sessionStorage兩者的區別在於存儲的有效期和作用域不同：數據可以存儲多長時間以及誰擁有數據的訪問權。通過localStorage存儲的數據是永久性的，除非web應用刻意刪除存儲的數據，或者用戶通過設置瀏覽器配置來刪除，否則數據將一直保留在用戶的電腦上，永不過期。localStorage的作用域是限定在文檔源級別的。文檔源是通過協議、主機名端口三者來確定的。同源的文檔共享同樣的localStorage數據。它們可以互相讀取對方的數據，甚至可以覆蓋對方的數據（即使它們運行的腳本是來自同一臺第三方服務器也不行）。注意：localStorage的作用域也受瀏覽器供應商的限制。如果使用firefox訪問站點，那麼下次用另一個瀏覽器再次訪問的時候，那麼本次是無法獲取上次存儲的數據。

sessionStorage存儲的數據，一旦窗口或者標籤頁被永久關閉了，那麼所有通過sessionStorage存儲的數據也都被刪除了。（當然要瀏覽的是，現代瀏覽器已經具備了重新打開最近關閉的標籤頁隨後恢復上一次瀏覽的會話功能，因此，這些標籤頁以及與之相關的sessionStorage的有效期可能會更加長些）。它的作用域也是限定在窗口中，如果同源的文檔渲染在不同的瀏覽標籤頁中，那麼它們互相之間擁有的是各自的sessionStorage數據，無法共享；一個標籤頁中的腳本是無法讀取或覆蓋另一個標籤頁腳本寫入的數據。哪怕這兩個標籤渲染的是同一個頁面，運行的是同一個腳本。其實就是說sessionStorage僅對某個會話有效。

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屬性，則應該使用uri屬性如果調用clear()方法，那麼key、oldValue和newValue都會被設置爲null。

PS.在firefox和chrome中存儲和讀取都是正常的, 但是對storage事件的觸發似乎有點問題, 自身頁面進行setItem後沒有觸發window的storage事件, 但是同時訪問A.html和B.html, 在A頁面中進行 setItem能觸發B頁面中window的storage事件, 同樣的在B頁面中進行setItem能觸發A頁面中window的storage事件. 在IE9中, 頁面自身的設值能觸發當前頁面的storage事件,同樣當前頁面的設值能觸發同一”起源”下其他頁面window的storage事件,這看起來似乎更讓人想的通些.

2.localStprage

localStorage.getItem(key)
//獲取指定key本地存儲的值 如果key不存在返回null

localStorage.setItem(key,value)
//將value存儲到key字段 如果key存在時 更新value

localStorage.removeItem(key)
//刪除指定key本地存儲的值 一旦刪除 key對應的數據將會全部刪除

localStorage.clear()
//某些時候使用removeItem逐個刪除太麻煩，可以使用clear,執行的後果是會清
//除所有localStorage對象保存的數據

tips:但是自己觀察localStorage存儲的值都是字符串類型在處理複雜的數據時，比如json數據時需要藉助JSON類將json字符串轉換成真正可用的json格式

JSON.stringify(data)  
//將一個對象轉換成JSON格式的數據串 返回轉換後的串

JSON.parse(data) 
//將數據解析成對象 返回解析後的對象

//備註：localStorage存數的數據是不能跨瀏覽器共用的 一個瀏覽器只能讀取
//各自瀏覽器的數據 儲存空間5M

3.sessionstorage

sessionStorage.getItem(key)
//獲取指定key本地存儲的值

sessionStorage.setItem(key,value)
//將value存儲到key字段

sessionStorage.removeItem(key)
//刪除指定key本地存儲的值

sessionStorage.length
//是sessionStorage的項目數

以上兩者都用下述方法遍歷

   //length屬性及key()方法 傳入0~length-1的數字 可以枚舉所有存儲數據的名字   
       for(vari=0;i<localStorage.length;i++){
            var name = localStorage.key(i);
            var value = localStorage.getItem(name);
       }

4.存儲事件storage

無論什麼時候存儲在localStorage或者sessionStorage的數據發生改變，瀏覽器都會在其他對該數據可見的窗口對象上觸發存儲事件（但是，在對數據進行改變的窗口對象上是不會觸發的）如果瀏覽器有兩個標籤頁面都打開來自同源的頁面，其中一個頁面在localStorage上存儲了數據，那麼另外一個標籤頁就會接收到一個存儲事件。sessionStorage的作用域是限制在頂層窗口的，因此對sessionStorage的改變只有當有相牽連的窗口的時候纔會觸發存儲事件。還要注意，只有當存儲數據真正發生改變的時候纔會觸發存儲事件。像給已經存在的存儲項設置一個一模一樣的值，抑或是刪除一個本來就不存在的存儲項都是不會觸發存儲事件的。

爲了存儲事件註冊處理程序可以通過addEventListener()方法或attachEvent()方法。在絕大多數瀏覽器中，還可以使用window對象設置onstorage屬性的方式，不Firefox不支持。

與存儲事件相關的事件對象有5個非常重要的屬性（遺憾的是，IE8不支持它！！！）

l key：被設置或者移除的項的名字或鍵名。如果調用的是clear()函數，那麼該屬性值爲null

l newValue:保存該項的新值；或者調用removeItem()時，該屬性值爲null。

l oldValue:改變或者刪除該項，保存該項原先的值；當插入一個新項的時候，該屬性值爲null。

l storageArea:這個屬性值就好比是目標Window對象上的localStroage屬性或是sessionStorage屬性

l url:觸發該存儲變化腳本所在的文檔的URL

注意：localStroage和存儲事件是採用廣播機制的，瀏覽器會對目前正在訪問的同樣的站點的所有窗口發送消息。

5.說點其他的小尾巴

<script type="text/javascript">
if (localStorage.pagecount)
  {
  localStorage.pagecount=Number(localStorage.pagecount) +1;
  }
else
  {
  localStorage.pagecount=1;
  }
if (localStorage.pagecount == 1)
  {
window.location.href="home.html";  //這裏也可以換成APPCAN的打開窗口API
  }
else
  {
document.write("你一共運行本頁面共計： "+ localStorage.pagecount + " 次");
  }
</script>

//當首次運行後，運行home.html文件
//後升級客戶端，在index.html沒修改的情況， localStorage.pagecount 
//繼續計數
//當刪除客戶端重新安裝後， localStorage.pagecount 重新計數

6.小尾巴的小尾巴 Dot寫法舉栗子

在localStroage 存在所謂Dot的寫法

其實Dot呢 dot.js是一個模板框架在web前端使用說的再簡單點就是dot.js作爲模板引擎

主要的用途就是在寫好的模板上放進數據生成含有數據的html代碼還是bu懂嗎再舉個栗子

doT.template( template )( obj )  
//代碼解釋：把模板template，作爲參數
//傳入doT.template()  方法，dot就把模板處理一下，然後你再把數據對象傳
//入，返回值，就是html與數據 一起生成的html代碼了，再拼接到頁面即
//可；

寫一個栗子吧

用dot方式來操作（每次以’hello’=>’world’,’zhangsan’=>’lisi’來做爲例子）

設值 
localStorage.hello = 'world';
localStorage.zhangsan = 'lisi';
取值：
var value_of_hello_in_localStorage = localStorage.hello;
var value_of_zhangsan_in_localStorage = localStorage.zhangsan

用getItem setItem來操作

設值：
localStorage.setItem("hello", "world");
localStorage.setItem("zhangsan", "lisi");
取值：
localStorage.getItem("hello");
localStorage.getItem("zhangsan");

這兩種方法的效率我不清楚，但是爲什麼推薦使用get setItem呢？

1.容易控制，便於動態綁定，尤其在函數抽離和重構中。比如我要存一個複雜類型，每次存的時候都需要做JSON.stringify(object_a)，所以我把它抽成函數

//用dot方式來實現設值：
function storage_object（key,object_value)
{
    localStorage.key = JSON.stringify(object_value);
}
//用getItem方式來實現：
function storage_object (key,object_value）
{
  localStorage.setItem(key,JSON.stringify(object_value));
}

這時候就會明顯的發現用dot的方式是很不合適的。因爲他不能實現動態的綁定key。所以對於新手來說乖乖從簡單的開始敲吧

在度孃的時候我看到這麼一段代碼現在還是不太理解但是有些註釋可以拿來參考一下

var show = 0; //定義默認展示的是第一個TAB選中狀態 
if (window.localStorage){ //如果瀏覽器支持localStorage 
    var navShow = localStorage.getItem("shownum"); //獲取客戶端TAB狀態 
    if(navShow==null){ //如果爲空，即第一次打開 
        //將默認的第一個TAB設置爲選中狀態並顯示與其對應的list 
        $("#nav ul li").eq(show).addClass("cur").siblings().removeClass("cur"); 
        $(".list").eq(show).show().siblings().hide(); 
    } 
    $("#nav ul li").each(function(index){ //遍歷每個TAB 
        var li = $(this); 
        show = li.attr("cur")==true?index:show; //如果當前TAB被點擊選中，則將show值設爲當前的索引值 
        if(index==navShow){ //如果當前索引值與存儲的TAB狀態值一致 
            li.addClass("cur"); //設置爲選中狀態樣式 
            $(".list").eq(index).show().siblings().hide(); //顯示對應的list 
        } 
        li.click(function(){ //當單擊當前TAB時 
            li.addClass("cur").siblings().removeClass("cur");//設置爲選中狀態樣式 
            $(".list").eq(index).show().siblings().hide(); //顯示對應的list 
            localStorage.setItem("shownum",index); //將TAB選中狀態存儲到本地 
        }); 
    }); 
}else{//如果瀏覽器不支持localStorage 
    alert('您的瀏覽器不支持localStorage.'); 
}

8.這個真的是賣萌的小尾巴了！舉個大栗子！！

假設我們需要用0和1 來標記某種對象的狀態然後我們記錄一大串的對象狀態

那麼先把這一大(羊肉)串的對象的狀態塞入一個數組數組中 js的數組用push命令（沒啥我就是複習一下）

<script type="text/javascript">
var arrList = [0,1,1,1,1,0,1]

//將之存起來

if (window.localStorage) {
    localStorage.setItem("Item", arrList);  
} else {
    Cookie.write("Item", arrList);  
}


//每次需要將這一大(羊肉)串的狀態取出來使用的時候 比如說每次載入界面

var storeDate = 
window.localStorage？localStorage.getItem("Item"): 

Cookie.read("Item");    

//需要注意的是：雖然我們存儲的是數組，但是，實際上存儲的的是數組字符化後
//的字符串(Cookie和localStorage都是)，因此，我們在處理storeDate的時
//候，一定要當作字符串處理，類似下面：

storeDate.split(",").each(function(display, index) {
    //根據存儲的display觸發相對應的動作
});

</script>

這只是拋磚引玉一點小思路或許以後的開發吾會用到這個

HTML5 localStroage/sessionStorage存儲

Apache 和tomcat 的環境搭建

HTML5 localStroage/sessionStorage存儲

Java synchronized 關於…

SQL時間查詢和子查詢

APACHE服務器500錯誤解決方法與強制跳轉

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結