首頁 web前端 H5教程 HTML5本地儲存之Web Storage應用介紹_html5教學技巧

HTML5本地儲存之Web Storage應用介紹_html5教學技巧

May 16, 2016 pm 03:50 PM
storage 本地儲存

Web Storage是HTML5引入的一個非常重要的功能,可以在客戶端本地存儲數據,類似HTML4的cookie,但可實現功能要比cookie強大的多,cookie大小被限制在4KB,Web Storage官方建議為每個網站5MB。
Web Storage又分為兩種
sessionStorage
localStorage
從字面意思就可以很清楚的看出來,sessionStorage將資料保存在session中,瀏覽器關閉也就沒了;而localStorage則一直將資料保存在客戶端本地;
不管是sessionStorage,還是localStorage,可使用的API都相同,常用的有如下幾個(以localStorage為例):
儲存資料:localStorage.setItem(key,value);
讀取資料:localStorage.getItem(key);
刪除單一資料:localStorage.removeItem(key);
刪除所有資料:localStorage.clear ();
得到某個索引的key:localStorage.key(index);
如上,key和value都必須為字串,換言之,web Storage的API只能操作字串。
接下來,我們透過Web Storage開發一個簡單的通訊錄小程序,以演示相關API的使用方法;我們要實現如下功能:
錄入聯絡人,聯絡人有姓名、手機號碼2個字段,以手機號碼作為key存入localStorage;
根據手機號碼,查找機主;
列出所有目前已儲存的聯絡人資訊;
首先,準備一個簡單的HTML頁面,如下

複製程式碼
程式碼如下:


程式碼如下:



程式碼如下:



程式碼如下:



程式碼如下:



程式碼如下:



程式碼如下:



HTML5本地儲存之Web Storage篇









介面展現如下

 要實現聯絡人的保存,只需簡單實作如下JS方法:

複製程式碼程式碼如下:
//儲存資料
function save(){
var mobileone = document.getElementById("mobilephone").value;
var 用戶_name = document.getElementById("user_name").value;
localStorage.setItem(mobilephone,user_name);
localStorage.setItem(mobilephone,user_name);
localStorage.setItem(mobilephone,user_name);
}

要實現查找機主,實現如下JS方法


複製程式碼
複製程式碼
程式碼如下: //查找資料function find(){ var search_phone = document.getElementById("search_phone").value; var name = localStorage.get (search_phone); var find_result = document.getElementById("find_result"); find_result.innerHTML = search_phone "的機主是:" name; } 要展現所有已保存的聯絡人信息,則需要使用localStorage.key(index)方法,如下: 複製代碼複製代碼複製代碼複製代碼複製代碼複製代碼複製代碼複製代碼複製代碼代碼如下:

//將所有儲存在localStorage中的物件擷取出來,並展現到介面上
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "";
result = "";
for(var i=0;ivar mobilephone = localStorage.key(i);
var name = localStorage.getItem( mobilephone);
result = "";
}
result = " table>";
list.innerHTML = result;
}else{
list.innerHTML = "目前資料為空,趕快開始加入聯絡人吧";
}
}

效果如下:
 
問題:如上的演示,都只有2個字段,姓名和手機號碼,如果要存入更為豐富的聯繫人信息,比如公司名稱、家庭地址等,如何實現? Web Storage不是只能處理字串嗎?此時,可以利用JSON的stringify()方法,將複雜物件轉變成字串,存入Web Storage中;當從Web Storage中讀取時,可以透過JSON的parse()方法再轉換成JSON物件;
如下簡單演示增加了公司屬性的聯繫人保存JS代碼

複製代碼
程式碼如下:

//儲存資料
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 strify.string ;
localStorage.setItem(contact.mobilephone,str);
loadAll();
}
//將所有儲存在localStorage中的物件擷取出來,並展現到介面上
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "
姓名 手機號碼 td>
" name " " mobilephone "
";
result = "";
for(var i=0;ivar mobilephone = localStorage.key(i);
var str = localStorage.getItem(mobilephone);
var contact = JSON.parse(str); = "";
}
result = "
姓名 手機 公司
" contact.user_name " " contact.mobilephone " " contact.company "
";
list.innerHTML = result;
}else{
list.innerHTML = "目前資料為空,趕快開始加入聯絡人吧";
}
}

效果如下:

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
兩個點博物館:所有展覽以及在哪裡可以找到它們
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
兩個點博物館:所有展覽以及在哪裡可以找到它們
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Vue專案開發中的資料快取與本地儲存經驗分享 Vue專案開發中的資料快取與本地儲存經驗分享 Nov 03, 2023 am 09:15 AM

Vue專案開發中的資料快取與本地儲存經驗分享

storage資料夾在哪裡 storage資料夾在哪裡 Jan 12, 2021 pm 02:02 PM

storage資料夾在哪裡

Vue專案中如何進行資料的本機儲存與管理 Vue專案中如何進行資料的本機儲存與管理 Oct 08, 2023 pm 12:05 PM

Vue專案中如何進行資料的本機儲存與管理

揭示localstorage的主要用途:它為我們帶來了哪些方便? 揭示localstorage的主要用途:它為我們帶來了哪些方便? Jan 13, 2024 pm 12:39 PM

揭示localstorage的主要用途:它為我們帶來了哪些方便?

比較分析localstorage的五種不同方式,以提高資料保存效率 比較分析localstorage的五種不同方式,以提高資料保存效率 Jan 13, 2024 am 08:47 AM

比較分析localstorage的五種不同方式,以提高資料保存效率

uniapp實作如何使用本機儲存localStorage uniapp實作如何使用本機儲存localStorage Oct 21, 2023 am 09:36 AM

uniapp實作如何使用本機儲存localStorage

如何使用Vue進行資料快取和本地存儲 如何使用Vue進行資料快取和本地存儲 Aug 03, 2023 pm 02:33 PM

如何使用Vue進行資料快取和本地存儲

掌握sessionstorage:簡單管理使用者會話數據 掌握sessionstorage:簡單管理使用者會話數據 Jan 11, 2024 pm 04:57 PM

掌握sessionstorage:簡單管理使用者會話數據

See all articles