柚子快報(bào)激活碼778899分享：前端 HTML5 Web 存儲(chǔ)

http://yzkb.51969.com/

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

什么是 HTML5 Web 存儲(chǔ)?

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

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

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

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

注意:?Internet Explorer 7 及更早IE版本不支持web 存儲(chǔ).

localStorage 和 sessionStorage?

客戶端存儲(chǔ)數(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 存儲(chǔ)前,應(yīng)檢查瀏覽器是否支持 localStorage 和 sessionStorage:

if(typeof(Storage)!=="undefined")

{

// 是的! 支持 localStorage sessionStorage 對象!

// 一些代碼.....

} else {

// 抱歉! 不支持 web 存儲(chǔ)。

}

localStorage 對象

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

實(shí)例

// 存儲(chǔ)

localStorage.setItem("sitename", "菜鳥教程");

// 查找

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

實(shí)例解析：

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

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

// 存儲(chǔ)

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);

提示:?鍵/值對通常以字符串存儲(chǔ)，你可以按自己的需要轉(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 + " 次 ";

sessionStorage 對象

sessionStorage 方法針對一個(gè) session 進(jìn)行數(shù)據(jù)存儲(chǔ)。當(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 + " 次 ";

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í)例

實(shí)現(xiàn)效果截圖：

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

接下來我們將使用?JSON.stringify?來存儲(chǔ)對象數(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í)例

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

輸出結(jié)果演示：

柚子快報(bào)激活碼778899分享：前端 HTML5 Web 存儲(chǔ)

http://yzkb.51969.com/

參考鏈接