什么是Web Storage

Web Storage是HTML5里面引入的一個類似于cookie的本地存儲功能，可以用于客戶端的本地存儲，其相對于cookie來說有以下幾點優勢：

存儲空間大：cookie只有4KB的存儲空間，而Web Storage在官方建議中為每個網站5M。

可選擇性強：Web Storage分為兩種：sessionStorage和localStorage

Web Storage的使用方法

在使用上，session Storage和local Storage大同小異，只是session Storage是將數據臨時存儲在session中，瀏覽器關閉，數據隨之消失。而local Storage則是將數據存儲在本地，理論上來說數據永遠不會消失，除非人為刪除。

API：

保存數據 localStorage.setItem( key, value ); sessionStorage.setItem( key, value );

讀取數據 localStorage.getItem( key ); sessionStorage.getItem( key );

刪除單個數據localStorage.removeItem( key ); sessionStorage.removeItem( key );

刪除全部數據localStorage.clear( ); sessionStorage.clear( );

獲取索引的keylocalStorage.key( index ); sessionStorage.key( index );

注意：Web Storage的API只能操作字符串

在使用Web Storage之前，我們需要注意以下幾點：

僅支持支持IE8及以上版本

由于只能對字符串類型數據進行操作，所以對一些JSON對象需要進行轉換

因為是明文存儲，所以毫無隱私性可言，絕對不能用于存儲重要信息

會是瀏覽器加載速度在一定程度上變慢

無法被爬蟲程序爬取

使用Web Storage之前，請加上以下代碼，對瀏覽器對Web Storage的支持性進行判斷

if(window.localStorage){//或者window.sessionStorage

alert("瀏覽器支持localStorage")

//主邏輯業務

}else{

alert("瀏覽不支持localStorage")

//替代方法

}

我們來寫一個學生管理小程序用于演示Web Storage的基本用法

簡單的html頁面先準備好

學生姓名:

性別:

學號:

家庭住址:

電話號碼:

---

---

輸入姓名：

---

輸入姓名：

---

在這個程序里面我們將實現增刪查的基本功能，修改數據的功能相信大家看完后自己就能寫出來。

接下來開始寫方法：

存儲

//利用localStorage存儲數據

function save() {

var contact = new Object();

var Name = document.getElementById("name").value;

var Sex = document.getElementById("sex").value;

var Num = document.getElementById("num").value;

var Add = document.getElementById("add").value;

var Tel = document.getElementById("tel").value;

if(JTrim(Name) != "" && JTrim(Sex) != "" && JTrim(Num) != "" && JTrim(Add) != "" && JTrim(Tel) != "") {

contact.name = Name;

contact.sex = Sex;

contact.num = Num;

contact.add = Add;

contact.tel = Tel;

var str = JSON.stringify(contact);//對JSON對象進行處理，用于從一個對象解析出字符串

if(window.localStorage) {

localStorage.setItem(contact.name,str);

} else {

alert("您暫時還無法使用本功能");

return;

}

} else {

alert("請輸入內容");

}

}

其中用到了Trim()這個方法，用于判斷輸入是否為空

function JTrim(s) {

return s.replace(/(^\s*)|(\s*$)/g, "");

}

展示所有信息

function loadAll() {

var resource = document.getElementById("list");

if(window.localStorage) {

var result = "

result += "

姓名性別學號家庭住址電話號碼";

for(var i = 0;i < localStorage.length; i++) {

var Name = localStorage.key(i);//用于得到索引的key，在這個程序里，key為name

var str = localStorage.getItem(Name);

var contact = JSON.parse(str);//對JSON對象進行處理，用于從一個字符串中解析出JSON對象

result += "

"+contact.name+""+contact.sex+""+contact.num+""+contact.add+""+contact.tel+"";

}

result += "

";

resource.innerHTML = result;

} else {

alert("您暫時還無法使用本功能");

return;

}

}

查詢

function search() {

var resource = document.getElementById("tato");

var search_name = document.getElementById("search_name").value;

if(window.localStorage) {

var str = localStorage.getItem(search_name);

if(str != null) {

var result = "

result += "

姓名性別學號家庭住址電話號碼";

var contact = JSON.parse(str);

result += "

"+contact.name+""+contact.sex+""+contact.num+""+contact.add+""+contact.tel+"";

result += "

";

resource.innerHTML = result;

} else {

alert("系統無此人");

return;

}

} else {

alert("您暫時還無法使用本功能");

return;

}

}

刪除

function del() {

var del_name = document.getElementById("del_name").value;

if(window.localStorage) {

var result = localStorage.getItem(del_name);

localStorage.removeItem(del_name);

if(result != null) {

alert("刪除成功");

} else {

alert("系統無此人");

return;

}

} else {

alert("您暫時還無法使用本功能");

return;

}

}

在這里如果想對所有數據做刪除處理則只需將localStorage.removeItem();換成localStorage.clear();即可

現在讓我們在瀏覽器的開發者工具里面看一看Web Storage到底是怎么存儲的

我們可以在chrome開發者工具里面找到Application這個選項，其中就有今天的主角：Local Storage和Session Storage

現在輸入一些數據

點擊提交之后我們立刻就能在Local Storage里面看到明文存儲的數據(后面的value是以JSON對象來存儲的，所以在對其進行操作的時候需要轉換格式)

總結

Web Storage固然簡單實用，但是數據的明文存儲實在是硬傷，所以各位使用之前請三思

總結

以上是生活随笔為你收集整理的html5本地存储论坛,Web Storage--HTML5本地存储的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。