HTML5 Web 儲存
HTML5 web 儲存,一個比cookie更好的本地儲存方式。
什麼是 HTML5 Web 儲存?
使用HTML5可以在本地儲存使用者的瀏覽資料。
早些時候,本地儲存使用的是 cookie。但是Web 儲存需要更加的安全與快速. 這些資料不會被儲存在伺服器上，但是這些資料只用於使用者請求網站資料上.它也可以儲存大量的資料，而不影響網站的效能.
資料以 鍵/值 對存在, web網頁的資料只允許該網頁訪問使用。
瀏覽器支援
Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支援Web 儲存。
注意: Internet Explorer 7 及更早IE版本不支援web 儲存.
localStorage 和 sessionStorage
客戶端儲存資料的兩個物件為：
- localStorage - 用於長久儲存整個網站的資料，儲存的資料沒有過期時間，直到手動去除。
- sessionStorage - 用於臨時儲存同一視窗(或標籤頁)的資料，在關閉視窗或標籤頁之後將會刪除這些資料。
在使用 web 儲存前,應檢查瀏覽器是否支援 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined")
{
} else {
}
localStorage 物件
localStorage 物件儲存的資料沒有時間限制。第二天、第二週或下一年之後，資料依然可用。
例項
localStorage.sitename="入門教學";
document.getElementById("result").innerHTML="網站名：" + localStorage.sitename;
例項解析：
- 使用 key="sitename" 和 value="https://www.itread01.com/html/入門教學" 建立一個 localStorage 鍵/值對。
- 檢索鍵值為"sitename" 的值然後將資料插入 id="result"的元素中。
以上例項也可以這麼寫：
localStorage.sitename = "入門教學";
document.getElementById("result").innerHTML = localStorage.sitename;
移除 localStorage 中的 "sitename" :
localStorage.removeItem("sitename");
不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：
-
儲存資料：localStorage.setItem(key,value);
-
讀取資料：localStorage.getItem(key);
-
刪除單個數據：localStorage.removeItem(key);
-
刪除所有資料：localStorage.clear();
-
得到某個索引的key：localStorage.key(index);
提示: 鍵/值對通常以字串儲存，你可以按自己的需要轉換該格式。
下面的例項展示了使用者點選按鈕的次數。
程式碼中的字串值轉換為數字型別:
例項
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已經點選了按鈕 " + localStorage.clickcount + " 次 ";
嘗試一下 ?
sessionStorage 物件
sessionStorage 方法針對一個 session 進行資料儲存。當用戶關閉瀏覽器視窗後，資料會被刪除。
如何建立並訪問一個 sessionStorage：
例項
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="在這個會話中你已經點選了該按鈕 " + sessionStorage.clickcount + " 次 ";
嘗試一下 ?
Web Storage 開發一個簡單的網站列表程式
網站列表程式實現以下功能：
-
可以輸入網站名，網址，以網站名作為key存入localStorage；
-
根據網站名，查詢網址；
-
列出當前已儲存的所有網站；
以下程式碼用於保存於查詢資料：
save() 與 find() 方法
function save(){
var siteurl = document.getElementById("siteurl").value;
var sitename = document.getElementById("sitename").value;
localStorage.setItem(sitename, siteurl);
alert("新增成功");
}
function find(){
var search_site = document.getElementById("search_site").value;
var sitename = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
find_result.innerHTML = search_site + "的網址是：" + sitename;
}
完整例項演示如下：
例項
<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
<label for="sitename">網站名(key)：</label>
<input type="text" id="sitename" name="sitename" class="text"/>
<br/>
<label for="siteurl">網 址(value)：</label>
<input type="text" id="siteurl" name="siteurl"/>
<br/>
<input type="button" onclick="save()" value="新增記錄"/>
<hr/>
<label for="search_site">輸入網站名：</label>
<input type="text" id="search_site" name="search_site"/>
<input type="button" onclick="find()" value="查詢網站"/>
<p id="find_result"><br/></p>
</div>
嘗試一下 ?
實現效果截圖：
以上例項只是演示了簡單的 localStorage 儲存與查詢，更多情況下我們儲存的資料會更復雜。
接下來我們將使用 JSON.stringify 來儲存物件資料，JSON.stringify 可以將物件轉換為字串。
var site = new Object;
...
var str = JSON.stringify(site);
之後我們使用 JSON.parse 方法將字串轉換為 JSON 物件：
var site = JSON.parse(str);
JavaScript 實現程式碼：
save() 與 find() 方法
function save(){
var site = new Object;
site.keyname = document.getElementById("keyname").value;
site.sitename = document.getElementById("sitename").value;
site.siteurl = document.getElementById("siteurl").value;
var str = JSON.stringify(site);
localStorage.setItem(site.keyname,str);
alert("儲存成功");
}
function find(){
var search_site = document.getElementById("search_site").value;
var str = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
var site = JSON.parse(str);
find_result.innerHTML = search_site + "的網站名是：" + site.sitename + "，網址是：" + site.siteurl;
}
完整例項如下：
例項
<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
<label for="keyname">別名(key):</label>
<input type="text" id="keyname" name="keyname" class="text"/>
<br/>
<label for="sitename">網站名：</label>
<input type="text" id="sitename" name="sitename" class="text"/>
<br/>
<label for="siteurl">網 址：</label>
<input type="text" id="siteurl" name="siteurl"/>
<br/>
<input type="button" onclick="save()" value="新增記錄"/>
<hr/>
<label for="search_site">輸入別名(key)：</label>
<input type="text" id="search_site" name="search_site"/>
<input type="button" onclick="find()" value="查詢網站"/>
<p id="find_result"><br/></p>
</div>
嘗試一下 ?
例項中的 loadAll 輸出了所有儲存的資料，你需要確保 localStorage 儲存的資料都為 JSON 格式，否則 JSON.parse(str) 將會報錯。
輸出結果演示：
