上一篇：HTML5 語義元素下一篇：HTML5 Web SQL

HTML5 Web 存儲

在HTML5之前，主要是使用cookies存儲，cookies的缺點(diǎn)有：需要在請求頭上帶著數(shù)據(jù)，存儲大小不過，在4k之內(nèi)。

HTML5 web 存儲,一個(gè)比cookie更好的本地存儲方式。

什么是 HTML5 Web 存儲?

使用HTML5可以在本地存儲用戶的瀏覽數(shù)據(jù)。

早些時(shí)候,本地存儲使用的是 cookie。但是Web 存儲需要更加的安全與快速. 這些數(shù)據(jù)不會(huì)被保存在服務(wù)器上，但是這些數(shù)據(jù)只用于用戶請求網(wǎng)站數(shù)據(jù)上.它也可以存儲大量的數(shù)據(jù)，而不影響網(wǎng)站的性能.

數(shù)據(jù)以鍵/值對存在, web網(wǎng)頁的數(shù)據(jù)只允許該網(wǎng)頁訪問使用。

瀏覽器支持

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存儲。

注意: Internet Explorer 7 及更早IE版本不支持web 存儲.

localStorage 和 sessionStorage?

客戶端存儲數(shù)據(jù)的兩個(gè)對象為：

localStorage - 用于長久保存整個(gè)網(wǎng)站的數(shù)據(jù)，保存的數(shù)據(jù)沒有過期時(shí)間，直到手動(dòng)去除。
sessionStorage - 用于臨時(shí)保存同一窗口(或標(biāo)簽頁)的數(shù)據(jù)，在關(guān)閉窗口或標(biāo)簽頁之后將會(huì)刪除這些數(shù)據(jù)。

在使用 web 存儲前,應(yīng)檢查瀏覽器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined") { // 是的! 支持 localStorage sessionStorage 對象! // 一些代碼..... } else { // 抱歉! 不支持 web 存儲。 }

localStorage 對象

localStorage 對象存儲的數(shù)據(jù)沒有時(shí)間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用。

實(shí)例

localStorage.sitename="小白教程"; document.getElementById("result").innerHTML="網(wǎng)站名：" + localStorage.sitename;

運(yùn)行代碼 ?

實(shí)例解析：

使用 key="sitename" 和 value="小白教程" 創(chuàng)建一個(gè) localStorage 鍵/值對。
檢索鍵值為"sitename" 的值然后將數(shù)據(jù)插入 id="result"的元素中。

以上實(shí)例也可以這么寫：

// 存儲 localStorage.sitename = "小白教程"; // 查找 document.getElementById("result").innerHTML = localStorage.sitename;

移除 localStorage 中的 "sitename" :

localStorage.removeItem("sitename");

不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個(gè)（以localStorage為例）：

保存數(shù)據(jù)：localStorage.setItem(key,value);
讀取數(shù)據(jù)：localStorage.getItem(key);
刪除單個(gè)數(shù)據(jù)：localStorage.removeItem(key);
刪除所有數(shù)據(jù)：localStorage.clear();
得到某個(gè)索引的key：localStorage.key(index);

提示: 鍵/值對通常以字符串存儲，你可以按自己的需要轉(zhuǎn)換該格式。

下面的實(shí)例展示了用戶點(diǎn)擊按鈕的次數(shù)。

代碼中的字符串值轉(zhuǎn)換為數(shù)字類型:

實(shí)例

if (localStorage.clickcount) { localStorage.clickcount=Number(localStorage.clickcount)+1; } else { localStorage.clickcount=1; } document.getElementById("result").innerHTML=" 你已經(jīng)點(diǎn)擊了按鈕 " + localStorage.clickcount + " 次 ";

運(yùn)行代碼 ?

sessionStorage 對象

sessionStorage 方法針對一個(gè) session 進(jìn)行數(shù)據(jù)存儲。當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會(huì)被刪除。

如何創(chuàng)建并訪問一個(gè) sessionStorage：

實(shí)例

if (sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount=1; } document.getElementById("result").innerHTML="在這個(gè)會(huì)話中你已經(jīng)點(diǎn)擊了該按鈕 " + sessionStorage.clickcount + " 次 ";

運(yùn)行代碼 ?

Web Storage 開發(fā)一個(gè)簡單的網(wǎng)站列表程序

網(wǎng)站列表程序?qū)崿F(xiàn)以下功能：

可以輸入網(wǎng)站名，網(wǎng)址，以網(wǎng)站名作為key存入localStorage；
根據(jù)網(wǎng)站名，查找網(wǎng)址；
列出當(dāng)前已保存的所有網(wǎng)站；

以下代碼用于保存于查找數(shù)據(jù)：

save() 與 find() 方法

//保存數(shù)據(jù) function save(){ var siteurl = document.getElementById("siteurl").value; var sitename = document.getElementById("sitename").value; localStorage.setItem(sitename, siteurl); alert("添加成功"); } //查找數(shù)據(jù) 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 + "的網(wǎng)址是：" + sitename; }

完整實(shí)例演示如下：

實(shí)例

<div style="border: 2px dashed #ccc;width:320px;text-align:center;"> <label for="sitename">網(wǎng)站名(key)：</label> <input type="text" id="sitename" name="sitename" class="text"/> <br/> <label for="siteurl">網(wǎng) 址(value)：</label> <input type="text" id="siteurl" name="siteurl"/> <br/> <input type="button" onclick="save()" value="新增記錄"/> <hr/> <label for="search_site">輸入網(wǎng)站名：</label> <input type="text" id="search_site" name="search_site"/> <input type="button" onclick="find()" value="查找網(wǎng)站"/> <p id="find_result"><br/></p> </div>

運(yùn)行代碼 ?

以上實(shí)例只是演示了簡單的 localStorage 存儲與查找，更多情況下我們存儲的數(shù)據(jù)會(huì)更復(fù)雜。

接下來我們將使用 JSON.stringify 來存儲對象數(shù)據(jù)，JSON.stringify 可以將對象轉(zhuǎn)換為字符串。

var site = new Object; ... var str = JSON.stringify(site); // 將對象轉(zhuǎn)換為字符串

之后我們使用 JSON.parse 方法將字符串轉(zhuǎn)換為 JSON 對象：

var site = JSON.parse(str);

JavaScript 實(shí)現(xiàn)代碼：

save() 與 find() 方法

//保存數(shù)據(jù) 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); // 將對象轉(zhuǎn)換為字符串 localStorage.setItem(site.keyname,str); alert("保存成功"); } //查找數(shù)據(jù) 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 + "的網(wǎng)站名是：" + site.sitename + "，網(wǎng)址是：" + site.siteurl; }

完整實(shí)例如下：

實(shí)例

運(yùn)行代碼 ?

實(shí)例中的 loadAll 輸出了所有存儲的數(shù)據(jù)，你需要確保 localStorage 存儲的數(shù)據(jù)都為 JSON 格式，否則 JSON.parse(str) 將會(huì)報(bào)錯(cuò)。

上一篇：HTML5 語義元素下一篇：HTML5 Web SQL

中文字幕一区二区人妻电影,亚洲av无码一区二区乱子伦as ,亚洲精品无码永久在线观看,亚洲成aⅴ人片久青草影院按摩,亚洲黑人巨大videos

HTML5 Web 存儲

什么是 HTML5 Web 存儲?

瀏覽器支持

localStorage 和 sessionStorage?

localStorage 對象

實(shí)例

實(shí)例

sessionStorage 對象

實(shí)例

Web Storage 開發(fā)一個(gè)簡單的網(wǎng)站列表程序

save() 與 find() 方法

實(shí)例

save() 與 find() 方法

實(shí)例