我的啟蒙--HTML5 第四章 本地儲存

標籤：ons   個數   .com   瀏覽器   點擊   session   else   輕量級   快速   

HTML5 Web 儲存　　　　使用HTML5可以在本機存放區使用者的瀏覽資料。　　　　早些時候,本機存放區使用的是 cookie。但是Web 儲存需要更加的安全與快速. 這些資料不會被儲存在伺服器上，但是這些資料只用於使用者請求網站資料上.它也可以儲存大量的　資料，而不影響網站的效能.資料以 鍵/值 對存在, web網頁的資料只允許該網頁訪問使用。

 

　　localStorage 和 sessionStorage   

　　　　用戶端儲存資料的兩個對象為：
　　　　localStorage - 沒有時間限制的資料存放區      sessionStorage - 針對一個 session 的資料存放區
　　　　在使用 web 儲存前,應檢查瀏覽器是否支援 localStorage 和sessionStorage:如下

if(typeof(Storage)!=="undefined"){    // 是的! 支援 localStorage  sessionStorage 對象!} else {    // 抱歉! 不支援 web 儲存。}

　　localStorage 對象

　　　　localStorage Object Storage Service的資料沒有時間限制。第二天、第二周或下一年之後，資料依然可用。
　　　　localStorage.sitename=“老貓師";
　　　　document.getElementById("result").innerHTML="網站名：" + localStorage.sitename;
　　　　執行個體解析：
　　　　使用 key=“sitename” 和 value=“老貓師" 建立一個 localStorage 鍵/值對。檢索索引值為"sitename" 的值然後將資料插入 id="result"的元素中

 

　　sessionStorage 對象

　　　　sessionStorage 方法針對一個 session 進行資料存放區。當使用者關閉瀏覽器視窗後，資料會被刪除。
　　　　如何建立並訪問一個 sessionStorage:

if (sessionStorage.clickcount){ sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;}else{   sessionStorage.clickcount=1;}document.getElementById("result").innerHTML="在這個會話中你已經點擊了該按鈕 " + sessionStorage.clickcount + " 次 ";

　　　　

　　　　不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：
　　　　儲存資料：localStorage.setItem(key,value);
　　　　讀取資料：localStorage.getItem(key);
　　　　刪除單個資料：localStorage.removeItem(key);
　　　　刪除所有資料：localStorage.clear();
　　　　得到某個索引的key：localStorage.key(index);

　　在這裡簡單說下json

　　　　JSON:json的全稱是“Javascript Object Notation”，意思是Javascript對象表示方法，他是一種基於文本，獨立與語言的輕量級資料交換格式。

謹記當初奮鬥的自己,是他讓現在的自己,享受美好,                                           敬給還在奮鬥的你們,望與君共勉.

我的啟蒙--HTML5 第四章 本地儲存