HTML5本地存儲(chǔ)之Web Storage應(yīng)用介紹_HTML5教程
推薦:html5指南-5.使用web storage存儲(chǔ)鍵值對(duì)的數(shù)據(jù)本節(jié)課的內(nèi)容是介紹web storage,使用它在瀏覽器里存儲(chǔ)鍵值對(duì)的數(shù)據(jù),功能上像以前的cookie一樣,不過他更好,存儲(chǔ)的數(shù)據(jù)可以更大感興趣的朋友可以了解下哦
Web Storage是HTML5引入的一個(gè)非常重要的功能,可以在客戶端本地存儲(chǔ)數(shù)據(jù),類似HTML4的cookie,但可實(shí)現(xiàn)功能要比cookie強(qiáng)大的多,cookie大小被限制在4KB,Web Storage官方建議為每個(gè)網(wǎng)站5MB。Web Storage又分為兩種:
sessionStorage
localStorage
從字面意思就可以很清楚的看出來,sessionStorage將數(shù)據(jù)保存在session中,瀏覽器關(guān)閉也就沒了;而localStorage則一直將數(shù)據(jù)保存在客戶端本地;
不管是sessionStorage,還是localStorage,可使用的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);
如上,key和value都必須為字符串,換言之,web Storage的API只能操作字符串。
接下來,我們通過Web Storage開發(fā)一個(gè)簡(jiǎn)單的通訊錄小程序,以演示相關(guān)API的使用方法;我們要實(shí)現(xiàn)如下功能:
錄入聯(lián)系人,聯(lián)系人有姓名、手機(jī)號(hào)碼2個(gè)字段,以手機(jī)號(hào)作為key存入localStorage;
根據(jù)手機(jī)號(hào)碼,查找機(jī)主;
列出當(dāng)前已保存的所有聯(lián)系人信息;
首先,準(zhǔn)備一個(gè)簡(jiǎn)單的HTML頁(yè)面,如下:
復(fù)制代碼 代碼如下:m.dounai2.com
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>HTML5本地存儲(chǔ)之Web Storage篇</title>
</head>
<body>
<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
<label for="user_name">姓名:</label>
<input type="text" id="user_name" name="user_name" class="text"/>
<br/>
<label for="mobilephone">手機(jī):</label>
<input type="text" id="mobilephone" name="mobilephone"/>
<br/>
<input type="button" onclick="save()" value="新增記錄"/>
<hr/>
<label for="search_phone">輸入手機(jī)號(hào):</label>
<input type="text" id="search_phone" name="search_phone"/>
<input type="button" onclick="find()" value="查找機(jī)主"/>
<p id="find_result"><br/></p>
</div>
<br/>
<div id="list">
</div>
</body>
</html>
界面展現(xiàn)如下:
要實(shí)現(xiàn)聯(lián)系人的保存,只需要簡(jiǎn)單實(shí)現(xiàn)如下JS方法即可:
復(fù)制代碼 代碼如下:m.dounai2.com
//保存數(shù)據(jù)
function save(){
var mobilephone = document.getElementById("mobilephone").value;
var user_name = document.getElementById("user_name").value;
localStorage.setItem(mobilephone,user_name);
}
要實(shí)現(xiàn)查找機(jī)主,則實(shí)現(xiàn)如下JS方法:
復(fù)制代碼 代碼如下:m.dounai2.com
//查找數(shù)據(jù)
function find(){
var search_phone = document.getElementById("search_phone").value;
var name = localStorage.getItem(search_phone);
var find_result = document.getElementById("find_result");
find_result.innerHTML = search_phone + "的機(jī)主是:" + name;
}
要展現(xiàn)所有已保存的聯(lián)系人信息,則需要使用localStorage.key(index)方法,如下:
復(fù)制代碼 代碼如下:m.dounai2.com
//將所有存儲(chǔ)在localStorage中的對(duì)象提取出來,并展現(xiàn)到界面上
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "<table border='1'>";
result += "<tr><td>姓名</td><td>手機(jī)號(hào)碼</td></tr>";
for(var i=0;i<localStorage.length;i++){
var mobilephone = localStorage.key(i);
var name = localStorage.getItem(mobilephone);
result += "<tr><td>"+name+"</td><td>"+mobilephone+"</td></tr>";
}
result += "</table>";
list.innerHTML = result;
}else{
list.innerHTML = "目前數(shù)據(jù)為空,趕緊開始加入聯(lián)系人吧";
}
}
效果如下:
問題:如上的演示,都只有2個(gè)字段,姓名和手機(jī)號(hào)碼,如果要存入更為豐富的聯(lián)系人信息,比如公司名稱、家庭地址等,如何實(shí)現(xiàn)呢?Web Storage不是只能處理字符串嗎?此時(shí),可以利用JSON的stringify()方法,將復(fù)雜對(duì)象轉(zhuǎn)變成字符串,存入Web Storage中;當(dāng)從Web Storage中讀取時(shí),可以通過JSON的parse()方法再轉(zhuǎn)換成JSON對(duì)象;
如下簡(jiǎn)單演示增加了公司屬性的聯(lián)系人保存JS代碼:
復(fù)制代碼 代碼如下:m.dounai2.com
//保存數(shù)據(jù)
function save(){
var contact = new Object;
contact.user_name = document.getElementById("user_name").value;
contact.mobilephone = document.getElementById("mobilephone").value;
contact.company = document.getElementById("company").value;
var str = JSON.stringify(contact);
localStorage.setItem(contact.mobilephone,str);
loadAll();
}
//將所有存儲(chǔ)在localStorage中的對(duì)象提取出來,并展現(xiàn)到界面上
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "<table border='1'>";
result += "<tr><td>姓名</td><td>手機(jī)</td><td>公司</td></tr>";
for(var i=0;i<localStorage.length;i++){
var mobilephone = localStorage.key(i);
var str = localStorage.getItem(mobilephone);
var contact = JSON.parse(str);
result += "<tr><td>"+contact.user_name+"</td><td>"+contact.mobilephone+"</td><td>"+contact.company+"</td></tr>";
}
result += "</table>";
list.innerHTML = result;
}else{
list.innerHTML = "目前數(shù)據(jù)為空,趕緊開始加入聯(lián)系人吧";
}
}
效果如下:
分享:html5 Canvas畫圖教程(2)—畫直線與設(shè)置線條的樣式如顏色/端點(diǎn)/交匯點(diǎn)在學(xué)畫畫的時(shí)候,線條是最基本的了,而線條的連接可以組成任何圖形。在Canvas中也是如此,接下來為您詳細(xì)介紹最簡(jiǎn)單的線條的畫法
相關(guān)HTML5教程:
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開發(fā)的過程介紹
- HTML5 對(duì)各個(gè)標(biāo)簽的定義與規(guī)定:body的介紹
- 關(guān)于HTML5的安全問題開發(fā)人員需要牢記的
- 關(guān)于HTML5的22個(gè)初級(jí)技巧(圖文教程)
- 開發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫(kù)的SQL語句的使用方法
- HTML5實(shí)踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略(CSP)簡(jiǎn)介
- HTML5 Web存儲(chǔ)方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲(chǔ)案例應(yīng)用
- Bootstrap 學(xué)習(xí)分享
- input元素的url類型和email類型簡(jiǎn)介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- HTML5 Web Database 數(shù)據(jù)庫(kù)的SQL語句的使用方法
- 使用css如何制作時(shí)間ICON方法實(shí)踐
- 用HTML5實(shí)現(xiàn)網(wǎng)站在windows8中貼靠的方法
- html5 Canvas畫圖教程(2)—畫直線與設(shè)置線條的樣式如顏色/端點(diǎn)/交匯點(diǎn)
- html5構(gòu)建觸屏網(wǎng)站之touch事件介紹
- HTML5教程之html 5 本地?cái)?shù)據(jù)庫(kù)(Web Sql Database)
- 幾個(gè)解決兼容IE6\7\8不支持html5標(biāo)簽的幾個(gè)方法
- HTML5重塑Web世界它將如何改變互聯(lián)網(wǎng)
- 突破canvas語法限制 讓他支持鏈?zhǔn)秸Z法
- 如何讓IE9以下版本(ie6/7/8)認(rèn)識(shí)html5元素
- 相關(guān)鏈接:
- 教程說明:
HTML5教程-HTML5本地存儲(chǔ)之Web Storage應(yīng)用介紹。